元素的显示模式及其区别

Category（分类）: CSS Status: 未知

什么是元素的显示模式？

在 CSS 中，元素最终如何参与布局，主要由 display 属性决定。传统教程经常把元素分成三类：

块级（block）；
行内（inline）；
行内块（inline-block）。

这种分类适合入门，但不能理解为 HTML 元素永久固定的类型。比如，<div> 默认通常是块级盒，但可以通过 CSS 变成行内盒、行内块、Flex 容器或 Grid 容器：

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

因此，判断一个元素的实际显示模式，应查看 CSS 规则和浏览器中的计算样式，而不能只根据 HTML 标签名称判断。

1. 块级盒（Block-level box）

.item {
  width: 100px;
  height: 100px;
}

.item1 {
  background-color: #f1f755;
}

.item2 {
  background-color: #38c7f7;
}

.item3 {
  background-color: #62fab0;
}

<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>

块级盒在普通流中通常会沿块方向依次排列，每个盒子从新的一行开始。普通流中的非替换块级盒在 width: auto 时，通常会填充包含块的可用宽度。

块级盒的常见特点

在普通块布局中通常独占一行；
width 和 height 通常可以设置；
margin、padding 和 border 通常可以完整参与盒模型计算；
height: auto 时，高度通常由内容、内边距和边框共同决定；
如果元素成为 Flex item、Grid item、浮动元素或绝对定位元素，布局规则会发生变化。

“块级元素默认占满父元素”需要加上条件：这通常只适用于普通流中 width: auto 的非替换块级盒。如果设置了固定宽度、外边距、定位或特殊布局，实际宽度可能不同。

常见的块级或块级表现元素

以下是浏览器默认样式中通常表现为块级盒的元素：

主体结构：<html>、<body>；
排版元素：<h1> 到 <h6>、<hr>、<p>、<pre>、<div>；
列表容器：<ul>、<ol>、<dl>；
表单容器：<form>；
语义结构元素：<article>、<aside>、<details>、<figure>、<figcaption>、<footer>、<header>、<main>、<nav>、<section>；
对话框：<dialog> 在显示时通常以块级方式参与布局，但它具有特殊的顶层和交互行为。

<li> 默认不是普通的 block，而是 list-item；它具有块级排列特征，同时还包含列表标记。

2. 行内盒（Inline box）

div {
  width: 100px;
  height: 100px;
  display: inline;
}

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

行内盒会参与行内格式化上下文，在同一行中从左到右排列。当前行没有足够空间时，行内内容通常会在合适的断点换到下一行。

如果行内元素没有文本、内边距、边框或其他可见内容，即使设置了背景色，也可能看起来没有尺寸。这是因为普通非替换行内盒的 width 和 height 通常不适用。

行内盒的常见特点

通常不会独占一行；
宽度通常由内容、字体和行内布局决定；
普通非替换行内元素的 width 和 height 通常不会生效；
line-height 会影响行盒高度；
水平内边距和边框通常会影响视觉宽度，垂直方向的表现需要结合行高和具体元素测试；
长单词、长 URL 或不可断开的内容可能溢出，而不一定自动换行。

“行内元素无法设置宽高”是对普通非替换行内元素的简化说法。<img>、<input>、<iframe> 等替换元素即使是行内级元素，也可以拥有自身尺寸。

常见的行内元素包括：

<a>；
<span>；
<em>；
<strong>；
<i>；
<sup>；
<sub>；
<del>；
<ins>；
<label>；
<mark>；
<time>。

<br> 用于插入换行机会，不应简单理解为普通的行内盒。

3. 行内块盒（Inline-block box）

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>

inline-block 同时具有两方面特征：

在外部布局中，它像行内内容一样可以与其他元素排在同一行；
在自身内部，它可以设置宽高，并按照块容器的方式组织内容。

行内块盒的常见特点

默认不独占一行；
可以设置 width 和 height；
width: auto 时通常会根据内容和可用空间收缩；
会受到父元素 text-align、字体和源码空白的影响；
多个 inline-block 之间的 HTML 换行或空格，通常会形成可见间隙。

例如：

<div class="item item1"></div>
<div class="item item2"></div>

源码中的换行会被当作行内空白处理，因此两个色块之间可能出现间距。

消除 `inline-block` 间隙的方法

可以把标签写在同一行：

<div class="item item1"></div><div class="item item2"></div>

也可以使用 Flexbox：

.items {
  display: flex;
  gap: 0;
}

旧项目中还可以给父元素设置 font-size: 0，但这可能影响子元素继承的字体大小，使用时需要为子元素恢复正确的 font-size。现代项目更推荐 Flexbox 或 Grid。

4. HTML 标签与默认 `display` 的关系

HTML 标签的语义与 CSS 显示模式是两个不同概念。浏览器通过用户代理样式表为标签提供默认 display，开发者可以覆盖这些默认值。

常见默认块级表现

标签	默认或常见显示方式	说明
`<html>`、`<body>`	`block`	文档根和文档主体
`<h1>` 到 `<h6>`	`block`	标题
`<hr>`、`<p>`、`<pre>`、`<div>`	`block`	常见排版容器
`<ul>`、`<ol>`、`<dl>`	`block`	列表容器
`<form>`	`block`	表单容器
`<article>`、`<aside>`、`<footer>`、`<header>`	`block`	语义结构区域
`<main>`、`<nav>`、`<section>`	`block`	页面主要内容或章节区域
`<figure>`、`<figcaption>`	通常为 `block`	图文内容及其标题
`<details>`	通常为 `block`	可展开内容容器
`<li>`	`list-item`	具有列表标记，不是普通 `block`
`<summary>`	`list-item`	`<details>` 的摘要，具有特殊交互行为

表格相关元素

表格元素不是普通的块级、行内或行内块元素，而是使用专门的表格布局显示值：

标签	常见默认显示方式
`<table>`	`table`
`<caption>`	`table-caption`
`<thead>`、`<tbody>`、`<tfoot>`	`table-header-group`、`table-row-group`、`table-footer-group`
`<tr>`	`table-row`
`<td>`、`<th>`	`table-cell`
`<colgroup>`	`table-column-group`
`<col>`	`table-column`

因此，不能把 <table>、<tr>、<td> 和 <th> 统一归类为块级或行内块元素。

常见行内级和特殊元素

以下元素通常表现为行内级内容或具有特殊的用户代理显示方式：

<a>、<span>、<em>、<strong>、<i>；
<sup>、<sub>、<del>、<ins>、<label>；
<mark>、<time>；
<img>、<iframe> 等行内级替换元素；
<input>、<textarea>、<select>、<button> 等表单控件；
<option>，它由浏览器的表单控件内部机制进行特殊渲染。

<img> 不是严格意义上的 display: inline-block，但作为行内级替换元素，它可以设置宽高，因此在布局表现上经常被拿来与 inline-block 对比。表单控件的具体外观和计算样式也可能因浏览器和操作系统而不同。

5. CSS `display` 的现代理解

传统写法通常只有一个关键字：

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

现代 CSS 可以把 display 理解为外部显示类型和内部显示类型的组合：

.block-flow {
  display: block flow;
}

.inline-flow {
  display: inline flow;
}

.inline-block-equivalent {
  display: inline flow-root;
}

.flex-container {
  display: block flex;
}

.inline-flex-container {
  display: inline flex;
}

.grid-container {
  display: block grid;
}

例如：

block 表示元素在外部通常作为块级盒参与布局；
inline 表示元素在外部通常作为行内盒参与布局；
flow 表示内部使用普通流布局；
flow-root 表示内部建立新的 BFC；
flex 和 grid 表示内部使用 Flexbox 或 Grid 布局。

同一个元素可以切换显示模式

<span class="as-block">这个 span 可以显示成块</span>
<div class="as-inline">这个 div 可以显示成行内内容</div>

.as-block {
  display: block;
}

.as-inline {
  display: inline;
}

HTML 标签负责语义，CSS display 负责布局表现。不要因为标签名称是 div 或 span，就认为它永远只能使用某一种显示模式。

6. 盒模型与显示模式

显示模式与盒模型是两个不同概念。无论是块级盒、行内块盒还是 Flex item，都可能受到 box-sizing 影响：

* {
  box-sizing: border-box;
}

默认的 content-box 下：

实际占用宽度 = width + padding-left + padding-right + border-left + border-right

使用 border-box 后，声明的 width 通常会包含内容、内边距和边框，更容易控制并排元素的总宽度。

7. 常见显示模式对比

显示模式	外部排列方式	能否设置宽高	内部布局特点
`block`	通常独占一行	可以	普通流
`inline`	与文本同行排列	普通非替换元素通常不适用	行内流
`inline-block`	与文本同行排列	可以	类似块容器
`flow-root`	通常独占一行	可以	建立新的 BFC
`flex`	通常独占一行	可以	Flexbox
`inline-flex`	可与行内内容同行	可以	Flexbox
`grid`	通常独占一行	可以	Grid
`inline-grid`	可与行内内容同行	可以	Grid
`table`	表格布局	可以	表格格式化上下文
`none`	不参与渲染布局	不适用	不生成盒子