文章目录
1. **`display` 属性概述**1.1 语法1.2 常用取值
2. **`display` 属性的常用值及其作用**2.1 `block`2.2 `inline`2.3 `inline-block`2.4 `none`2.5 `flex`2.6 `grid`2.7 `table`2.8 `inline-flex`2.9 `inline-grid`2.10 `inline-table`2.11 `list-item`2.12 `contents`2.13 `flow-root`
3. **`display` 属性的其他值**3.1 `inherit`3.2 `initial`3.3 `unset`
4. **总结**
display 是 CSS 中最重要的属性之一，用于控制元素的显示方式。它决定了元素在页面中的布局行为，例如是否独占一行、是否可以设置宽高等。本文将详细讲解 display 属性的所有取值及其作用，并通过代码示例帮助读者深入理解。
1. display 属性概述
display 属性用于定义元素的显示类型，即元素在页面中的布局方式。它可以改变元素的默认行为，例如将块级元素变为内联元素，或者将元素隐藏。
1.1 语法
display: value;
1.2 常用取值
blockinlineinline-blocknoneflexgridtableinline-flexinline-gridinline-tablelist-itemcontentsflow-rootinheritinitialunset
2. display 属性的常用值及其作用
2.1 block
作用：将元素设置为块级元素。特点：
独占一行。可以设置宽度、高度、内外边距。默认宽度为父元素的 100%。 示例：
这也是块级元素
2.2 inline
作用：将元素设置为内联元素。特点：
不独占一行，与其他内联元素共享一行。不能设置宽度、高度。宽度和高度由内容决定。 示例：内联元素
2.3 inline-block
作用：将元素设置为内联块级元素。特点：
不独占一行，与其他内联元素共享一行。可以设置宽度、高度、内外边距。 示例：
2.4 none
作用：隐藏元素，元素不会占据页面空间。特点：
元素从文档流中移除。无法通过 JavaScript 访问其布局属性（如 offsetWidth）。 示例：
2.5 flex
作用：将元素设置为弹性盒子容器。特点：
子元素按照弹性盒子模型布局。可以轻松实现水平居中、垂直居中、等分布局等。 示例：
2.6 grid
作用：将元素设置为网格容器。特点：
子元素按照网格布局。可以定义行和列，实现复杂的二维布局。 示例：
2.7 table
作用：将元素设置为表格容器。特点：
子元素按照表格布局。可以模拟 HTML 表格的行为。 示例：
2.8 inline-flex
作用：将元素设置为内联弹性盒子容器。特点：
类似于 flex，但容器本身是内联元素。 示例：
2.9 inline-grid
作用：将元素设置为内联网格容器。特点：
类似于 grid，但容器本身是内联元素。 示例：
2.10 inline-table
作用：将元素设置为内联表格容器。特点：
类似于 table，但容器本身是内联元素。 示例：
2.11 list-item
作用：将元素设置为列表项。特点：
元素会显示为一个列表项，通常带有项目符号。 示例：
2.12 contents
作用：将元素的内容显示为其父元素的内容。特点：
元素本身不渲染，但其子元素会正常渲染。 示例：
2.13 flow-root
作用：创建一个新的块级格式化上下文（BFC）。特点：
可以解决浮动元素的父元素高度塌陷问题。 示例：
3. display 属性的其他值
3.1 inherit
作用：继承父元素的 display 值。
3.2 initial
作用：将 display 设置为默认值（通常是 inline）。
3.3 unset
作用：将 display 重置为继承值（如果有）或初始值。
4. 总结
display 属性是 CSS 布局的核心，通过不同的取值可以实现多种布局效果。以下是常用取值的对比：
取值特点block独占一行，可设置宽高inline不独占一行，不可设置宽高inline-block不独占一行，可设置宽高none隐藏元素，不占据空间flex弹性盒子布局，适合一维布局grid网格布局，适合二维布局table表格布局，适合模拟表格inline-flex内联弹性盒子布局inline-grid内联网格布局inline-table内联表格布局list-item列表项布局contents元素不渲染，子元素正常渲染flow-root创建新的 BFC，解决浮动问题
掌握 display 属性的各种取值及其作用，可以帮助开发者更灵活地控制页面布局，实现复杂的 UI 设计。
参考文献：
MDN Web Docs - displayCSS Tricks - display