display 有两个属性值
第一个是外部显示属性，设置外部元素显示类型(outer display type，即元素自身)
第二个是内部显示属性。设置内部元素显示类型(inner display type，即元素的子项)。
基本布局属性值语法含义
CSS 中使用单值语法进行样式设置，多值语法只是解析时的说明语法。
| 单值语法 | 多值语法 | 说明 |
|---|---|---|
| flow-root | block flow-root | 块，严格流式布局 |
| inline-block | inline flow-root | 行内，严格流式布局 |
| block | block flow | 块，流式布局 |
| inline | inline flow | 行内，流式布局 |
| flex | block flex | 块，弹性布局 |
| inline-flex | inline flex | 行内，弹性布局 |
| grid | block grid | 块，网格布局 |
| inline-grid | inline grid | 行内，网格布局 |
| table | block table | 块，表格布局 |
| inline-table | inline table | 行内，表格布局 |
外部显示类型
目前仅有2种类型：block、inline。
-
block
该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。 -
inline
该元素生成一个或多个行级盒子，它们之前或者之后并不会产生换行。
在正常的流中，如果有空间，下一个元素将会在同一行上。
内部显示类型
目前有5种类型：flow-root、flow、table、flex、grid。
-
flow-root
该元素生成一个块级元素盒，其会建立一个新的独立盒子BFC(BFC确保盒子里的所有东西都留在里面，盒子外的东西不能侵入它)。 -
flow
该元素使用流式布局（块向和行向布局）来排布它的内容。
同时根据其他属性的值（例如 position、float 或 overflow）以及它自身来建立盒子。 -
table
该元素的行为类似于 HTML 中的 <table> 元素。它定义了一个块级别的盒子。 -
flex
该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。 -
grid
该元素的行为类似块级元素并且根据网格模型布局它的内容。
流式布局属性值: flow与flow-root
根据其对展示的影响来说明区别
-
flow 流式布局
父元素的 margin 跟子元素的 margin 可能重合并合并。 -
flow-root 严格流式布局
父元素的 margin 跟子元素的 margin 独立存在，不会重合合并。（具体见 文章：块级盒子与BFC）
与html标签元素对应的属性值
行为类似于 HTML 中的某些标签元素。
| 属性值 | 对应的标签元素 |
|---|---|
| list-item | <li> |
| table-header-group | <thead> |
| table-footer-group | <tfoot> |
| table-row-group | <tbody> |
| table-row | <tr> |
| table-cell | <td> |
| table-column-group | <colgroup> |
| table-column | <col> |
| table-caption | <caption> |
其他属性值
除 none 外，其他值均为全局属性值(all: xxx)。
| 属性值 | 含义 | 说明 |
|---|---|---|
| none | 不显示 | 所有的后代元素也不会再显示，不占用布局空间。 |
| inherit | 继承父元素 | 不一定是直接继承，也可能是计算得出值。 |
| initial | 使用初始(或默认)值 | 不仅不使用自身的属性值，同时不会使用继承的父元素的属性值。 |
| unset | 未设置 | 设置后，要么是 inherit 继承值，要么是 initial 初始默认值。 |
| revert | 回滚 | 比较复杂，具体见 MDN/CSS/revert。 |
| revert-layer | 回滚到 @layer 中上一个级联层 | 需与 @layer 一起使用。具体见 MDN/CSS/revert-layer。 |
