CSS: CSS 显示模式
最后更新：2026-10-13
CSS 中每个元素都有默认的显示方式。理解不同的显示模式（display），是掌握布局的关键。
display 属性速查表
| 值 | 作用 | 常见元素 |
|---|---|---|
block |
块级元素，独占一行，可设宽高 | div, p, h1~h6, section |
inline |
行内元素，内容决定宽高，不可设宽高 | span, a, strong, em |
inline-block |
行内排列但可设宽高 | button, input, select |
flex |
弹性布局容器，子元素按主轴排列 | 布局容器 |
inline-flex |
行内弹性容器 | 内联布局 |
grid |
网格布局容器，同时控制行和列 | 页面整体布局 |
inline-grid |
行内网格容器 | 内联网格 |
none |
完全隐藏（不占据空间，不同于 visibility: hidden） |
隐藏元素 |
table |
类似 <table> 元素的行为 |
表格布局兼容 |
list-item |
类似 <li> 元素的行为 |
列表项 |
1. display 属性
display 属性控制元素的显示行为。它可能是 CSS 中最重要、最常用的属性之一。
(1) 块级元素（block）
块级元素的特点是：
- 独占一行，不会与其他元素并排
- 可以设置宽高，width 和 height 有效
- 默认宽度为父容器的 100%
常见的块级元素：<div>、<p>、<h1>-<h6>、<ul>、<li>、<section>、<header>、<footer> 等。
▶ 示例
▶ 试一试(2) 行内元素（inline）
行内元素的特点是：
- 不独占一行，可以与其它行内元素在同一行
- 不能设置宽高（width 和 height 无效）
- 尺寸由内容决定
- 水平方向的 margin 和 padding 有效，垂直方向无效
常见的行内元素：<span>、<a>、<strong>、<em>、<label> 等。
▶ 示例
▶ 试一试(3) 行内块元素（inline-block）
💡 inline-block 的间隙： 多个
display: inline-block 元素之间会有 4px 左右的空隙——这是因为 HTML 中的换行和空格被渲染了。解决方法：父元素设 font-size: 0，或者把元素间的换行去掉。
行内块元素结合了两种模式的特点：
- 不独占一行，可以与其它元素并排
- 可以设置宽高
- 是布局中非常实用的显示模式
▶ 示例
▶ 试一试inline-block 的常见问题：两个 inline-block 元素之间会有空格间隙——这是 HTML 中换行/空格导致的。解决方法：
▶ 示例
▶ 试一试(4) none（隐藏）
display: none 让元素完全不显示，不占据空间：
⚠️ 重要区别：
display: none 让元素彻底消失（不占空间），visibility: hidden 只是隐藏（仍占空间），opacity: 0 只是透明（仍占空间且可以交互）。三种方式用途截然不同。
📌 opacity 继承： 子元素无法通过设
opacity: 1 来覆盖父元素的 opacity: 0.5——因为 opacity 是作用于整个元素连同其所有子元素的。如果只想让背景半透明，用 rgba()。
▶ 示例
▶ 试一试与 visibility: hidden 的区别见下文。
(5) flex 和 grid
▶ 示例
▶ 试一试2. display 值总结
| 值 | 是否独占一行 | 能否设置宽高 | 常用场景 |
|---|---|---|---|
| block | ✅ | ✅ | div、p、标题等 |
| inline | ❌ | ❌ | span、a、strong等 |
| inline-block | ❌ | ✅ | 按钮、导航项等 |
| none | 不显示 | 不显示 | 隐藏元素 |
| flex | ✅ | ✅ | 弹性布局 |
| grid | ✅ | ✅ | 网格布局 |
3. visibility 属性
visibility 控制元素是否可见，但与 display: none 有所不同：
▶ 示例
▶ 试一试| 属性 | 是否可见 | 是否占据空间 | 是否可交互 |
|---|---|---|---|
display: none |
否 | 否 | 否 |
visibility: hidden |
否 | 是 | 否 |
visibility: visible |
是 | 是 | 是 |
4. 其他显示相关的属性
(1) opacity（透明度）
▶ 示例
▶ 试一试(2) 元素隐藏的几种方式对比
▶ 示例
▶ 试一试❓ 常见问题
Q display: none 和 visibility: hidden 有什么区别？
A display: none 让元素彻底消失，不占页面空间，后面的元素会补上来。visibility: hidden 只是隐藏了视觉，元素仍然占位。如果需要动画过渡效果，用 opacity: 0 配合 transition 更平滑。
Q inline-block 元素之间有间隙怎么去掉？
A 多个 inline-block 元素之间的 4px 间隙来自 HTML 中的换行和空格。解决方法：父元素设
font-size: 0 然后子元素单独设字号，或者把元素标签写成一行不换行。Q opacity: 0 和 visibility: hidden 都能隐藏，哪个性能好？
A opacity: 0 的元素仍然可以触发点击事件，visibility: hidden 不会。性能上二者差别不大，但 opacity 可以用过渡动画平滑显示/隐藏，visibility 不能做过渡。
📖 小节
display是布局的核心属性- 理解
block、inline、inline-block的区别，能帮你正确控制元素的排列方式 display: none和visibility: hidden虽然都能隐藏元素，但一个不占空间、一个占空间，使用场景不同- 在现代布局中，
display: flex和display: grid是最强大的布局工具
📝 作业
- 创建一个页面，分别用
block、inline、inline-block显示三个盒子，观察它们的排列和尺寸差异。 - 将一组导航链接设置为
inline-block，给它们设置宽高和内边距，制作水平导航栏。 - 演示
display: none和visibility: hidden的区别（提示：可以放两个元素在页面上，观察文档流的变化）。 - 使用
display: inline-block创建一个"按钮组"，注意处理 inline-block 之间的空格间隙问题。
