display所有值及其作用

display有很多的值，每个值都有其独特的作用以及特性，这也是面试中常被问到，或者比较容易考到的细琐知识点。

1.display的值

• none
• inline
• block
• list-item
• inline-block
• table
• inline-table
• table-caption
• table-cell
• table-row
• table-row-group
• table-column
• table-column-group
• table-footer-group
• table-header-group
• run-in
• box
• inline-box
• flexbox
• inline-flexbox
• flex
• inline-flex

2.各个值的作用

• inline（默认值）：表示指定对象为内联元素
• none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留
• block： 指定对象为块元素。
• list-item： 指定对象为列表项目。
• inline-block： 指定对象为内联块元素。（这是CSS2中的属性）
• table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）
• inline-table： 指定对象作为内联元素级的表格。类同于html标签table（CSS2）
• table-caption： 指定对象作为表格标题。类同于html标签caption（CSS2）
• table-cell： 指定对象作为表格单元格。类同于html标签td（CSS2）
• 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）
• inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）