浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。

定义和用法

display 属性规定元素应该生成的框的类型。

说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

可能的值

inline：（默认值）：表示指定对象为内联元素，元素前后没有换行符；

• 不能设置宽高，不能自动换行。
• span、input、img、textarea、label、select。
• 内外边距的 top / bottom 都不可改变（也就是 padding 和 margin的 left 和 right 是可以设置的），就是里面文字或图片的大小。

none： 表示隐藏对象；
block： 指定对象为块元素，此元素前后会带有换行符；

• 会自动换行，宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。
• p、h1/h2/h3/h4/h5、div、ul、li、table。

list-item： 指定对象为列表项目。

• 要完全模仿列表的话还需要加上 list-style-position，list-style-type

inline-block： 指定对象为内联块元素。（这是CSS2.1中的属性）

• 可以设置宽高，会自动换行

table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）。表格前后带有换行符；

• CSS表格能够解决所有那些我们在使⽤绝对定位和浮动定位进⾏多列布局时所遇到的问题。例如，display:table 的 CSS 声明能够让⼀个 HTML 元素和它的⼦节点像 table 元素⼀样。使⽤基于表格的 CSS 布局，使我们能够轻松定义⼀个单元格的边界、背景等样式， ⽽不会产⽣因为使⽤了 table 那样的制表标签所导致的语义化问题。

inline-table： 指定对象作为内联元素级的表格。类同于html标签table（CSS2）。表格前后没有换行符。
table-caption： 指定对象作为表格标题。类同于html标签caption（CSS2）

• 这个值会触发BFC布局

table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）

• 这个值会触发BFC布局

table-row： 指定对象作为表格行。类同于html标签tr（CSS2）
table-row-group： 指定对象作为表格行组。类同于html标签tbody（CSS2）
table-column： 指定对象作为表格列。类同于html标签col（CSS2）
table-column-group： 指定对象作为表格列组显示。类同于html标签colgroup（CSS2）
table-header-group： 指定对象作为表格标题组。类同于html标签thead（CSS2）
table-footer-group： 指定对象作为表格脚注组。类同于html标签tfoot（CSS2）
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3）
box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）
flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

• flex 是⼀种弹性布局属性

• 注意，设为 Flex 布局以后，⼦元素的 float、clear 和 vertical-align 属性将失效。

• 主要属性有两⼤类：容器属性和项⽬的属性
  容器属性

  • flex-direction: 属性决定主轴的⽅向（即项⽬的排列⽅向）。
  • flex-wrap: 默认情况下，项⽬都排在⼀条线（⼜称”轴线”）上。flex-wrap 属性定义，如果⼀条轴线排不下，如何换⾏。
  • flex-flow: 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
  • justify-content: 属性定义了项⽬在主轴上的对齐⽅式。
  • align-items: 属性定义项⽬在交叉轴上如何对齐。
  • align-content: 属性定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤。

  项⽬属性

  • order: 定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。
  • flex-grow: 定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。
  • flex-shrink: 属性定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。
  • flex-basis: 属性定义了在分配多余空间之前，项⽬占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项⽬的本来⼤⼩。
  • flex: 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）