CSS 显示类型与文档流

display 是 CSS 布局的第一属性

display 属性决定了元素的盒类型（Box Type），进而决定元素如何在文档流中布局。从最基础的 block 和 inline，到现代的 flex 和 grid，再到 CSS Display Module Level 3 引入的双值语法，display 经历了多次能力扩展。

理解 display 不只是记住几个关键字，而是理解外部显示类型（元素如何参与外部布局）和内部显示类型（元素如何格式化子元素）这对核心概念。

面试定位：display 是 CSS 最基础的概念之一。面试官通过双值语法的理解、display: contents 的行为、以及 inline 和 inline-block 的差异，问的是候选人对 CSS 渲染模型的掌握程度。

Box Type 分类体系

CSS 中有三种基础盒类型：

块级盒（Block-level Box）

独占一行（除非使用 float 或 position 脱离）
width 默认是父容器的 100%
可以设置 width、height、margin、padding
display: block、display: flex、display: grid 等产生块级盒

行内盒（Inline-level Box）

不独占一行，与其他行内元素共享一行
width 由内容决定，无法设置 width、height
水平方向的 margin、padding 有效；垂直方向的 margin 不影响行高，padding 可能与相邻行重叠
display: inline 产生行内盒

行内块盒（Inline-block Box）

不独占一行，但可以设置 width、height
内部格式化方式同块级
外部显示方式同行内
两侧不自动换行

<!-- 块级元素示例 -->
<div style="background: red;">块1</div>
<div style="background: blue;">块2</div>

<!-- 行内元素示例 -->
<span style="background: red;">行内1</span>
<span style="background: blue;">行内2</span>

<!-- 行内块元素示例 -->
<span style="display: inline-block; width: 100px; background: green;">行内块</span>

display 的双值语法

CSS Display Module Level 3 引入了 display 的双值语法，将传统的单值拆分为外部显示类型和内部显示类型：

对照表

旧值	新双值语法	外部	内部
`block`	`block flow`	block	flow
`inline`	`inline flow`	inline	flow
`inline-block`	`inline flow-root`	inline	flow-root
`flex`	`block flex`	block	flex
`inline-flex`	`inline flex`	inline	flex
`grid`	`block grid`	block	grid
`inline-grid`	`inline grid`	inline	grid
`block flow-root`	`flow-root`	block	flow-root

/* 单值写法（传统） */
.container { display: flex; }

/* 双值写法（现代） */
.container { display: block flex; }
/*           ↑ 外部 block（参与块级布局）
 *              ↑ 内部 flex（格式化子元素为 flex items） */

为什么双值语法重要？ 它解释了为什么 display: flex 的子元素可以用 align-self 而父元素不行——因为子元素的"内部"是 flex 格式化上下文，而父元素的"外部"仍是 block。

display: contents —— 消失的盒子

display: contents 让元素本身不产生任何盒子，只有子元素参与布局：

.card {
  display: contents;
  /* 这个 div 本身不产生盒模型中的盒子
   * 它的子元素直接参与父容器的布局
   * 背景、边框、padding、margin 都不渲染 */
}

实际应用场景：

<!-- 不使用额外 div 包裹实现嵌套 flex -->
<article style="display: flex;">
  <div style="display: contents;">
    <figure>...</figure>
    <div style="display: flex; flex-direction: column;">
      <h2>Title</h2>
      <p>Description</p>
    </div>
  </div>
</article>

无障碍警告：display: contents 会导致屏幕阅读器跳过该元素。如果该元素有语义意义（如 <li>），不要用 display: contents，否则列表结构会被破坏。

flow 和 flow-root

flow（正常流）

display: flow（等价于默认的 block）让元素参与正常文档流。子元素按照 Inline Formatting Context（IFC） 或 Block Formatting Context（BFC） 排列。

flow-root

display: flow-root 是专为创建 BFC 设计的值。它让元素：

成为一个块级容器
创建一个新的 BFC
不产生任何其他副作用（不像 overflow: hidden 会裁剪内容）

/* 创建 BFC 的最干净方式 */
.container {
  display: flow-root;
}

与 overflow: hidden 的对比：

/* overflow: hidden 的副作用 */
.container {
  overflow: hidden;
  /* 副作用1：裁剪超出的内容
   * 副作用2：如果内容超出容器，不会显示滚动条（需要 overflow: auto）
   * 副作用3：在某些浏览器中会影响表意的 overflow */
}

/* flow-root 没有这些副作用 */
.container {
  display: flow-root;
  /* 只创建 BFC，不影响内容的显示方式 */
}

inline 的深层机制

Inline Formatting Context（IFC）

当一个块容器只包含行内级元素时，会创建一个 Inline Formatting Context。IFC 中：

行内元素在一条"行盒（Line Box）"中水平排列
Line Box 的高度由所有行内元素决定（ tallest × baseline 策略）
垂直对齐可以用 vertical-align 控制

/* 垂直居中：利用 baseline */
.text {
  line-height: 100px; /* 与容器高度相同 */
  vertical-align: middle; /* 但这只是相对于兄弟 baseline */
}

line-height 和 vertical-align 的关系

vertical-align 只对行内元素和 display: inline-* 的元素有效，对块级元素无效。

/* 父元素用 flex 垂直居中（更可靠） */
.container {
  display: flex;
  align-items: center;
  height: 200px;
}

实战：选择正确的 display 值

布局决策树

元素需要独占一行吗？
├── 是 → 需要设置宽高吗？
│   ├── 是 → display: block（最基础）或 display: flex/grid（需要子元素布局）
│   └── 否 → display: block（默认）
└── 否 → 需要设置宽高吗？
    ├── 是 → display: inline-block
    └── 否 → display: inline

典型场景

/* 按钮：行内展示但可设置尺寸 */
.btn {
  display: inline-block;
  padding: 8px 16px;
  width: 120px; /* 固定宽度 */
  text-align: center;
}

/* 图标 + 文字组合：inline-block 让它们基线对齐 */
.icon-text {
  display: inline-block;
  vertical-align: middle;
}

/* 全宽容器内的 flex 布局 */
.page {
  display: block; /* 页面级容器 */
}

.content {
  display: flex; /* 内容区域用 flex */
  gap: 1rem;
}

.sidebar {
  display: grid; /* 侧边栏用 grid */
  grid-template-rows: auto 1fr auto;
}

面试高频问题

Q: display: inline 和 display: inline-block 有什么区别？

回答要点：inline 元素不能设置 width、height，垂直方向的 margin 不影响行高；而 inline-block 元素可以设置尺寸，但外部仍然同行内元素一样不独占一行。inline-block 实际上是"内部是块级格式化，外部显示为行内"的混合模式。

Q: display: contents 有什么副作用？

回答要点：display: contents 让元素本身不产生任何盒模型中的盒子，背景、边框、padding、margin 都不渲染。子元素直接参与父容器的布局。但这对无障碍有影响——屏幕阅读器会跳过该元素，可能破坏列表等语义结构。

Q: 双值语法解决了什么问题？

回答要点：双值语法（block flex、inline grid）揭示了 display 实际控制两件事：元素如何参与外部布局（block 或 inline）和如何格式化内部子元素（flow、flex、grid）。这让以前隐含的机制变得显式可操作，例如可以用 display: inline flex 让一个 flex 容器在外部表现为行内元素。