【HTML/CSS】display相关属性

1 display的定义

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

display使用不谨慎，可能会违反HTML中定义的显示层次结构

2 display的取值

常用的取值：

1. none：不显示
2. block：显示为块级元素，元素前后会带有换行符
3. inline：默认，元素会被显示为内联元素
4. inline-block：行内块元素
5. list-litem：作为列表显示
6. flex：弹性盒子布局
7. grid：网格布局

不常用的取值

6. run-in：会根据上下文作为块级元素或内联元素显示
7. table：块级表格
8. inline-table：内联表格
9. table-row-group：元素作为一行或多行的分组，类似tbody
10. table-header-group 此元素会作为一个或多个行的分组来显示，类似thead。
11. table-footer-group 此元素会作为一个或多个行的分组来显示，类似tfooter。
12. table-row：此元素会作为一个表格行显示（类似tr）。
13. table-column 此元素会作为一个单元格列显示（类似col）
14. table-cell 此元素会作为一个表格单元格显示（类似 td 和th）
15. table-caption 此元素会作为一个表格标题显示（类似 caption）
16. inherit：规定应该从父元素继承 display 属性的值。