Netherspite

display

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似<tfoot>）。
table-row 此元素会作为一个表格行显示（类似<tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

display：none与visibility：hidden

  • display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。
  • display：none是非继承属性，子孙节点消失是由于元素从渲染树中消失造成，通过修改子孙节点的属性无法显示；visibility：hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。
  • 读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。

display: flex

webkit内核必须加上-webkit前缀，子元素float、clear和vertical-align将失效

采用flex布局的元素成为flex容器，它的所有子元素自动成为容器成员

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

属性

  • flex-direction：决定主轴方向，主轴为水平方向，起点在左端（默认） | 起点在右端 | 主轴为垂直方向，起点在上沿 | 起点在下沿

    .box {
      flex-direction: row | row-reverse | column | column-reverse
    }

  • flex-wrap：一条轴线排不下的换行方式，不换行（默认） | 换行，第一行在上方 | 第一行在下方

    .box{
    	flex-wrap: nowrap | wrap | wrap-reverse; 
    }

  • flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

    .box {
    	flex-flow: <flex-direction> || <flex-wrap>;
    }

  • justify-content：项目在主轴上的对齐方式，左对齐（默认） | 右对齐 | 居中 | 两端对齐，项目之间间隔相等 | 每个项目两侧的间隔相等，项目之间的间隔比项目与边框间隔大一倍

    .box {
    	justify-content: flex-start | flex-end | center | space-between | space-around;
    }

  • align-items：项目在交叉轴上如何对齐，起点对齐 | 终点对齐 | 中点对齐 | 第一行文字的基线对齐 | 占满整个容器的高度（默认）

    .box {
    	align-items: flex-start | flex-end | center | baseline | stretch;
    }

  • align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

    .box {
    	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

项目的属性

  • order：项目的排列顺序。数值越小，排列越靠前，默认为0。

    .item {
    	order: <integer>;
    }

  • flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    .item {
    	flex-grow: <number>; /* default 0 */
    }

  • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    .item {
    	flex-shrink: <number>; /* default 1 */
    }

    如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    .item {
    	flex-basis: <length> | auto; /* default auto */
    }

    它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  • flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

    .item {
    	flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

  • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

    .item {
    	align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

display: grid

参考文章

  1. Flex 布局教程：语法篇
  2. Flex 布局教程：实例篇

 上一页

 评论