CSS-Display-Property-Block-Inline-InlineBlock-None-Visibility

字数统计: 3.4k阅读时长: 13 min

 2026/07/28 

第17课：显示类型：`display` 属性

display 属性是 CSS 布局的第一道闸门。它决定了一个元素生成的是块级盒还是行内盒，或者是否生成盒子。同一个 HTML 元素，只要改变 display 值，就可以在“独占一行”和“嵌入文本流”之间切换，甚至从页面中完全消失。理解 display 的各类取值及其行为差异，是构建任何布局之前的必要前提。本节课聚焦于最基础、最常用的四种 display 值：block、inline、inline-block、none，以及与之密切相关的 visibility 属性。

1. 元素盒子的两种基本类型

在 CSS 布局模型中，所有元素生成的盒子分为两种基本类型：块级盒（Block-level Box） 和行内级盒（Inline-level Box）。display 属性决定一个元素生成哪种类型的盒子。

1.1 块级元素与块级盒

当 display 值为 block、list-item、table、flex、grid 等时，元素生成块级盒。HTML 中的 <div>、<p>、<h1>~`

、

` 等默认均为块级元素。

块级盒的布局行为：

独占一行（换行）：每个块级盒都会在其父容器的内容区域中另起一行，后续内容会被推到下一行。
宽度默认撑满父容器：在未显式设置 width 时，块级盒的宽度默认是 100%（即父容器的内容宽度）。
高度由内容决定：若未显式设置 height，高度会收缩到刚好包裹其内部内容。
所有盒模型属性均生效：width、height、margin、padding、border 在四个方向均有效且按标准盒模型参与布局计算。

1 2	<div style="background: lightblue;">块级元素 1</div> <div style="background: lightgreen;">块级元素 2</div>

渲染效果：两个 <div> 上下堆叠，各占满父容器宽度。

1.2 行内元素与行内盒

当 display 值为 inline 时，元素生成行内盒。HTML 中的 <span>、<a>、<strong>、<em>、<img>、<input> 等默认均为行内元素。

行内盒的布局行为：

不换行：多个行内盒会从左到右排列在同一行，直到父容器宽度不足时才折行。
宽度由内容决定：width 和 height 属性对行内元素无效（非替换行内元素如 <span>）。元素的宽度和高度完全由其内容（文本、图片等）的尺寸决定。
垂直方向的 margin、padding、border 不占据布局空间：虽然可以设置 margin-top/margin-bottom、padding-top/padding-bottom、border-top/border-bottom，但它们不会推开上下相邻的行。视觉上背景和边框可能显示，但布局上它们是“悬浮”的，可能覆盖或重叠相邻行。
水平方向的 margin、padding、border 正常生效，会推开左右相邻的元素。

1
2
3

<p>
  这是段落文字，其中<span style="background: yellow; padding: 10px; margin: 10px; border: 2px solid red;">行内元素</span>嵌入在文本流中。
</p>

渲染效果：<span> 的左右 padding 和 margin 会推开文字；上下的 padding 和 margin 虽然可以看到黄色背景延伸和红色边框，但不会撑开段落行高，可能覆盖上一行或下一行的文字。

1.3 替换元素与非替换元素

在讨论行内元素时，必须区分替换元素和非替换元素：

类型	定义	典型元素	`width` / `height` 是否有效	`margin` 垂直方向是否推开空间
替换元素	元素的内容由外部资源决定，不受 CSS 直接控制（如 `<img>`、`<video>`、`<input>`）。	`<img>`、`<video>`、`<iframe>`、`<input>`	有效	有效（垂直 margin 占用空间）
非替换元素	元素的内容由文档内容直接提供（如 `<span>`、`<a>`）。	`<span>`、`<a>`、`<strong>`	无效	不占用空间（但可设置）

1 2	<!-- <img> 是替换行内元素，设置 width/height 有效 --> <img src="photo.jpg" style="width: 200px; height: 150px; margin: 20px;">

2. `display: inline-block`：行内盒与块级盒的混合体

inline-block 是一个极其重要的中间态。它让元素在外部表现为行内盒（不换行，从左到右排列），但在内部表现为块级盒（可以设置 width、height、垂直 margin 和 padding 并正常占据空间）。

<div class="card" style="display: inline-block; width: 200px; height: 150px; margin: 10px; padding: 15px; border: 2px solid #333;">
  <h3>卡片标题</h3>
  <p>这是一张 inline-block 卡片。</p>
</div>
<div class="card" style="display: inline-block; width: 200px; height: 150px; margin: 10px; padding: 15px; border: 2px solid #333;">
  <h3>卡片标题 2</h3>
  <p>这是第二张卡片。</p>
</div>

与 inline 的区别：

inline-block 元素可以设置 width、height，且垂直方向的 margin、padding 会推开上下元素。
inline 元素（非替换）无法设置 width/height，垂直 margin/padding 不占空间。

与 block 的区别：

inline-block 元素之间不会强制换行，多个元素可并排在同一行。
block 元素独占一行。

典型场景：

水平排列的导航菜单项。
照片墙中的缩略图。
表单控件的同行排列。

注意空白间隙：多个 inline-block 元素之间的 HTML 换行符会被解析为一个空格字符，导致元素间出现约 4px 的间距。解决方案：

在父容器上设置 font-size: 0，子元素上恢复 font-size。
将 HTML 中元素标签连写，去掉换行符。
使用 Flexbox 替代（现代推荐方案）。

3. `display: none`：从渲染树中完全移除

display: none 会让元素从渲染树中移除，就好像它不存在一样。

1
2
3

.hidden {
  display: none;
}

行为特征：

元素不占据任何布局空间。后续元素会填补其原本的位置。
元素的所有子元素一并消失，无法通过修改子元素的 display 来单独显示。
不可聚焦，无法响应任何事件。
屏幕阅读器也无法访问——元素完全不可见。
切换 display: none 与 display: block 等值会触发回流（Reflow），性能开销较大。

典型场景：

选项卡切换中隐藏非活跃面板。
条件性展示内容（如根据用户权限隐藏按钮）。
响应式设计中对某些断点隐藏元素。

4. `visibility` 属性：隐藏但占位

visibility 属性控制元素的可见性，但与 display: none 的核心区别在于：元素依然占据布局空间。

1
2
3

.invisible {
  visibility: hidden;
}

4.1 `visibility: visible` 与 `hidden` 的对比

属性	`display: none`	`visibility: hidden`
是否占据空间	不占据，元素从渲染树中移除。	占据，元素仍在布局中保留原有空间。
是否响应事件	不响应。	不响应（鼠标事件穿透，如同“隐形墙”不存在）。
子元素可见性	子元素一并隐藏，无法单独显示。	子元素可以继承覆盖。父元素 `visibility: hidden` 时，子元素设置 `visibility: visible` 可单独显示。
回流/重绘	触发回流（布局改变）。	仅触发重绘（布局未变）。
过渡动画	不支持过渡（离散值）。	支持过渡，可实现淡入淡出效果（常配合 `opacity` 使用）。

4.2 子元素覆写技巧

利用 visibility 的继承可覆写特性，可以实现一个有趣的效果：隐藏整个容器，但让内部的某个子元素保持可见。

<div style="visibility: hidden; border: 2px solid red; padding: 20px;">
  这段文字隐藏。
  <span style="visibility: visible; background: yellow;">只有我可见！</span>
</div>

渲染效果：红色边框的容器占据空间但本身不可见，内部黄色背景的 <span> 却清晰可见。

4.3 `visibility: collapse`

这个值专门用于表格行（<tr>）或表格列（<col>）。它与 hidden 类似，但对表格而言，collapse 会释放该行或列占据的空间，类似于 display: none 的效果（同时保留其他 visibility 的可覆写特性）。

1
2
3

tr.collapsed {
  visibility: collapse;
}

注意：对于非表格或非弹性/网格容器的子元素，visibility: collapse 的效果与 hidden 相同。

5. `opacity: 0` 的对比（补充说明）

虽然 opacity 不是 display 或 visibility 的直接替代，但在实际开发中常与它们混淆。简单对比如下：

属性	占据空间	响应事件	子元素影响	回流/重绘
`opacity: 0`	占据	可响应（默认，除非设 `pointer-events: none`）	子元素同样透明，无法覆盖	仅重绘（合成层）

课后练习

一、概念自测（选择题 / 填空题）

（单选） 想要让一个 <span> 元素可以设置 width 和 height，同时仍然与其他元素在同一行排列，应设置：
A. display: block
B. display: inline
C. display: inline-block
D. display: none
（单选） 关于 display: none 和 visibility: hidden 的区别，以下描述正确的是？
A. display: none 的元素仍占据布局空间。
B. visibility: hidden 的元素会触发回流。
C. 父元素 visibility: hidden 时，子元素可通过 visibility: visible 单独显示。
D. display: none 支持过渡动画。
（填空） 行内非替换元素（如 <span>）的 ______ 和 ______ 属性设置无效，元素尺寸仅由内容决定。
（多选） 以下哪些元素属于行内替换元素？
A. <img>
B. <span>
C. <input>
D. <video>

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要实现一个标签页切换（Tabs）组件的基础结构和样式。要求如下：

三个标签页按钮水平排列（使用 inline-block 或 Flexbox 均可）。
下方三个内容面板，默认只显示第一个面板，其余两个隐藏。
使用 display: none 控制面板的显示/隐藏（不要求编写 JS 切换逻辑，只需通过纯 HTML 和 CSS 展示三种状态：第一个面板默认显示，其余隐藏）。
添加一个隐藏但保留空间的占位元素，使用 visibility: hidden 实现（可在面板下方放一个提示文字，隐藏但保留空间，展示 visibility 的效果）。
标签页按钮需要清晰区分“选中”与“未选中”的视觉样式。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML 和 CSS。提示词中应明确指定 display 和 visibility 的不同用法，并说明其行为差异。

三、面试真题与参考答案

题目（阿里巴巴前端面试题）：

请详细比较 CSS 中 display: none、visibility: hidden 和 opacity: 0 三种隐藏方式的区别。从是否占据空间、是否响应事件、子元素能否单独显示、是否触发回流/重绘以及是否支持过渡动画五个维度进行对比。

参考答案：

对比维度	`display: none`	`visibility: hidden`	`opacity: 0`
占据布局空间	不占据。元素从渲染树移除，后续元素填补其位置。	占据。元素保留原空间，只是不可见。	占据。元素透明但仍在原位。
响应事件	不响应。无法接收任何鼠标或键盘事件。	不响应。鼠标事件穿透元素。	可响应（除非设置 `pointer-events: none`）。
子元素单独显示	不可以。子元素与父元素一并消失。	可以。子元素设置 `visibility: visible` 可覆盖继承，单独显示。	不可以。透明度相乘，子元素透明度极限也是 0。
回流（Reflow）/ 重绘（Repaint）	触发回流。布局改变，重新计算位置和尺寸。	触发重绘。布局未变，仅重新绘制像素。	仅重绘（现代浏览器会提升为合成层，GPU 加速）。
过渡动画支持	不支持。为离散值，无法在 `display: none` 与其他值之间过渡。	支持。但 `visibility` 从 `hidden` 到 `visible` 是瞬间切换，无中间态（通常配合 `opacity` 实现淡入淡出）。	完美支持。`opacity` 从 0 到 1 过渡平滑，是实现淡入淡出的首选。

课后练习答案

一、概念自测答案

C
- 解析：inline-block 外部表现为行内元素（不换行），内部表现为块级元素（可设置宽高）。
C
- 解析：visibility 可被子元素覆写。A 错，display: none 不占空间；B 错，visibility: hidden 仅触发重绘；D 错，display: none 为离散值，不支持过渡。
width 和 height
- 解析：行内非替换元素的尺寸完全由内容决定，width 和 height 属性无效。
A、C、D
- 解析：<img>、<input>、<video> 均为替换元素，其内容由外部资源定义，可设置 width/height。<span> 是非替换行内元素。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请生成一个简单的标签页切换结构（HTML + CSS），包含以下要素：

三个标签按钮水平排列，当前选中的标签有背景色 #fff 和底部边框无色，未选中的标签有灰色背景 #eee，使用 inline-block 实现排列。

三个内容面板（<div>），使用 display: none 隐藏除第一个外的其他面板（第一个面板为 display: block）。

在面板下方添加一行提示文字“更多内容加载中…”，使用 visibility: hidden 使其不可见但保留其在布局中的占位空间（与后续内容之间有明显的空白间隙）。

请用注释标明 display: none 与 visibility: hidden 的效果对比。

直接输出完整的 HTML 文件。”