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）
