display: block; 元素将被显示为块级元素，前后都会另起一行。类似于 HTML 中的 div 元素。
display: inline; 元素将被显示为内联元素，前后没有换行。类似于 HTML 中的 span 元素。
display: inline-block; 元素将被显示为内联元素，但可以设置宽度、高度等块级元素的属性。
display: flex; 使用弹性布局，元素排列可以沿着一条轴线进行排列。
display: inline-flex; 使用弹性布局，但元素将被显示为内联元素。
display: grid; 使用网格布局。
display: inline-grid; 使用网格布局，但元素将被显示为内联元素。
display: flow-root; 容器会创建一个块级格式化上下文，将其内部元素包含起来。
display: none; 元素将被隐藏，不占据空间。
display: contents; 元素的内容将被提取出来，作为父元素的直接子元素显示，该元素本身被视为不存在。
display: block flow; 等价于 display: block;。
display: inline flow; 等价于 display: inline;。
display: inline flow-root; 等价于 display: inline;。
display: block flex; 等价于 display: block;。
display: inline flex; 等价于 display: inline;。
display: block grid; 等价于 display: block;。
display: inline grid; 等价于 display: inline;。
display: table; 元素将被显示为表格。
display: table-row; 元素将被显示为表格行。
display: list-item; 元素将被显示为列表项。
还有一些全局值：
display: inherit; 继承父元素的 display 属性。
display: initial; 将 display 属性重置为默认值。
display: revert; 恢复为继承值。
display: revert-layer; 恢复为层叠上下文根元素的值。
display: unset; 将 display 属性重置为自然值。
行内元素和块元素分别由哪些？
常见的块级元素有：
div：通用容器，可用于布局和分组其他元素。
p：表示文本段落。
h1-h6：表示标题。
ul/ol：表示无序/有序列表。
li：表示列表项。
table：表示表格。
form：表示表单。
常见的行内元素有：
span：通用容器，可用于包含一段文本。
a：表示超链接。
img：表示图像。
input：表示表单元素。
button：表示按钮。
label：表示表单标签。
select：表示下拉列表框。
option：表示下拉列表框的选项。
strong/b：表示加粗文本。
em/i：表示斜体文本。
需要注意的是，HTML5 中还有一些元素可以根据上下文自动转换为块级元素或行内元素，比如 article、section、nav、aside、header、footer、main、figure、figcaption 等。
