CSS 中 `display` 属性的值及其作用：全面详解

display 是 CSS 中最重要的属性之一，用于控制元素的显示方式。它决定了元素在页面中的布局行为，例如是否独占一行、是否可以设置宽高等。本文将详细讲解 display 属性的所有取值及其作用，并通过代码示例帮助读者深入理解。

---

1. display 属性概述

display 属性用于定义元素的显示类型，即元素在页面中的布局方式。它可以改变元素的默认行为，例如将块级元素变为内联元素，或者将元素隐藏。

1.1 语法

display: value;

1.2 常用取值

• block
• inline
• inline-block
• none
• flex
• grid
• table
• inline-flex
• inline-grid
• inline-table
• list-item
• contents
• flow-root
• inherit
• initial
• unset

---

2. display 属性的常用值及其作用

2.1 block

• 作用：将元素设置为块级元素。
• 特点：
  • 独占一行。
  • 可以设置宽度、高度、内外边距。
  • 默认宽度为父元素的 100%。
• 示例：

  <div style="display: block; background: lightblue;">块级元素</div>
  <p style="display: block; background: lightgreen;">这也是块级元素</p>
  

2.2 inline

• 作用：将元素设置为内联元素。
• 特点：
  • 不独占一行，与其他内联元素共享一行。
  • 不能设置宽度、高度。
  • 宽度和高度由内容决定。
• 示例：

  <span style="display: inline; background: lightblue;">内联元素</span>
  <a href="#" style="display: inline; background: lightgreen;">链接也是内联元素</a>
  

2.3 inline-block

• 作用：将元素设置为内联块级元素。
• 特点：
  • 不独占一行，与其他内联元素共享一行。
  • 可以设置宽度、高度、内外边距。
• 示例：

  <div style="display: inline-block; width: 100px; height: 50px; background: lightblue;">内联块级元素</div>
  <div style="display: inline-block; width: 100px; height: 50px; background: lightgreen;">内联块级元素</div>
  

2.4 none

• 作用：隐藏元素，元素不会占据页面空间。
• 特点：
  • 元素从文档流中移除。
  • 无法通过 JavaScript 访问其布局属性（如 offsetWidth）。
• 示例：

  <div style="display: none; background: lightblue;">这个元素被隐藏了</div>
  

2.5 flex

• 作用：将元素设置为弹性盒子容器。
• 特点：
  • 子元素按照弹性盒子模型布局。
  • 可以轻松实现水平居中、垂直居中、等分布局等。
• 示例：

  <div style="display: flex; justify-content: space-between;">
    <div style="background: lightblue;">Flex 子元素 1</div>
    <div style="background: lightgreen;">Flex 子元素 2</div>
  </div>
  

2.6 grid

• 作用：将元素设置为网格容器。
• 特点：
  • 子元素按照网格布局。
  • 可以定义行和列，实现复杂的二维布局。
• 示例：

  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
    <div style="background: lightblue;">Grid 子元素 1</div>
    <div style="background: lightgreen;">Grid 子元素 2</div>
  </div>
  

2.7 table

• 作用：将元素设置为表格容器。
• 特点：
  • 子元素按照表格布局。
  • 可以模拟 HTML 表格的行为。
• 示例：

  <div style="display: table; width: 100%;">
    <div style="display: table-row;">
      <div style="display: table-cell; background: lightblue;">表格单元格 1</div>
      <div style="display: table-cell; background: lightgreen;">表格单元格 2</div>
    </div>
  </div>
  

2.8 inline-flex

• 作用：将元素设置为内联弹性盒子容器。
• 特点：
  • 类似于 flex，但容器本身是内联元素。
• 示例：

  <div style="display: inline-flex; background: lightblue;">
    <div>内联 Flex 子元素 1</div>
    <div>内联 Flex 子元素 2</div>
  </div>
  

2.9 inline-grid

• 作用：将元素设置为内联网格容器。
• 特点：
  • 类似于 grid，但容器本身是内联元素。
• 示例：

  <div style="display: inline-grid; grid-template-columns: 1fr 1fr; gap: 10px; background: lightblue;">
    <div>内联网格子元素 1</div>
    <div>内联网格子元素 2</div>
  </div>
  

2.10 inline-table

• 作用：将元素设置为内联表格容器。
• 特点：
  • 类似于 table，但容器本身是内联元素。
• 示例：

  <div style="display: inline-table; background: lightblue;">
    <div style="display: table-row;">
      <div style="display: table-cell;">内联表格单元格 1</div>
      <div style="display: table-cell;">内联表格单元格 2</div>
    </div>
  </div>
  

2.11 list-item

• 作用：将元素设置为列表项。
• 特点：
  • 元素会显示为一个列表项，通常带有项目符号。
• 示例：

  <div style="display: list-item; list-style-type: disc; margin-left: 20px;">列表项 1</div>
  <div style="display: list-item; list-style-type: disc; margin-left: 20px;">列表项 2</div>
  

2.12 contents

• 作用：将元素的内容显示为其父元素的内容。
• 特点：
  • 元素本身不渲染，但其子元素会正常渲染。
• 示例：

  <div style="border: 1px solid black;">
    <div style="display: contents; background: lightblue;">这个元素不渲染</div>
    <div>子元素</div>
  </div>
  

2.13 flow-root

• 作用：创建一个新的块级格式化上下文（BFC）。
• 特点：
  • 可以解决浮动元素的父元素高度塌陷问题。
• 示例：

  <div style="display: flow-root; border: 1px solid black;">
    <div style="float: left; width: 50px; height: 50px; background: lightblue;">浮动元素</div>
  </div>
  

---

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 - display
• CSS Tricks - display