CSS: CSS 显示模式
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> 等。
▶ 示例
HTML
<style>
.block {
display: block;
width: 200px;
height: 100px;
margin-bottom: 10px; /* 垂直方向有效 */
background: #e3f2fd; /* 加背景色便于观察 */
border: 1px solid #90caf9;
}
</style>
<div class="block">块级元素（占满整行）</div>
(2) 行内元素（inline）
行内元素的特点是：
- 不独占一行，可以与其它行内元素在同一行
- 不能设置宽高（width 和 height 无效）
- 尺寸由内容决定
- 水平方向的 margin 和 padding 有效，垂直方向无效
常见的行内元素：<span>、<a>、<strong>、<em>、<label> 等。
▶ 示例
HTML
<style>
.inline {
display: inline;
/* width: 100px; ❌ 无效 */
/* height: 50px; ❌ 无效 */
margin: 0 5px; /* 水平方向有效 */
}
</style>
<div class="inline">行内元素（水平排列）</div>
(3) 行内块元素（inline-block）
💡 inline-block 的间隙： 多个
display: inline-block 元素之间会有 4px 左右的空隙——这是因为 HTML 中的换行和空格被渲染了。解决方法：父元素设 font-size: 0，或者把元素间的换行去掉。
行内块元素结合了两种模式的特点：
- 不独占一行，可以与其它元素并排
- 可以设置宽高
- 是布局中非常实用的显示模式
▶ 示例
HTML
<style>
.button {
display: inline-block;
width: 120px;
height: 40px;
padding: 8px 16px;
margin: 5px;
background: #3498db;
color: white;
text-align: center;
}
</style>
<button class="button">Button</button>
inline-block 的常见问题：两个 inline-block 元素之间会有空格间隙——这是 HTML 中换行/空格导致的。解决方法：
▶ 示例
HTML
<style>
/* 方法1：父元素设置 font-size: 0 */
.parent {
font-size: 0;
}
.parent > * {
font-size: 16px; /* 子元素重新设置字体大小 */
}
/* 方法2：使用 flex 替代（推荐） */
.parent {
display: flex;
}
</style>
<div class="parent">父容器元素</div>
<div class="parent">父容器元素</div>
(4) none（隐藏）
display: none 让元素完全不显示，不占据空间：
⚠️ 重要区别：
display: none 让元素彻底消失（不占空间），visibility: hidden 只是隐藏（仍占空间），opacity: 0 只是透明（仍占空间且可以交互）。三种方式用途截然不同。
📌 opacity 继承： 子元素无法通过设
opacity: 1 来覆盖父元素的 opacity: 0.5——因为 opacity 是作用于整个元素连同其所有子元素的。如果只想让背景半透明，用 rgba()。
▶ 示例
HTML
<style>
.hidden {
display: none;
}
</style>
<div class="hidden">隐藏元素</div>
与 visibility: hidden 的区别见下文。
(5) flex 和 grid
▶ 示例
HTML
<style>
.flex-container {
display: flex; /* 弹性布局，后续专门讲解 */
}
.grid-container {
display: grid; /* 网格布局，后续专门讲解 */
}
.grid-container-item {
background: #e8f4f8;
border: 1px solid #3498db;
padding: 16px;
margin: 4px;
border-radius: 4px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-container-item">Grid container item</div>
<div class="grid-container-item">Grid container item</div>
<div class="grid-container-item">Grid container item</div>
</div>
2. display 值总结
| 值 | 是否独占一行 | 能否设置宽高 | 常用场景 |
|---|---|---|---|
| block | ✅ | ✅ | div、p、标题等 |
| inline | ❌ | ❌ | span、a、strong等 |
| inline-block | ❌ | ✅ | 按钮、导航项等 |
| none | 不显示 | 不显示 | 隐藏元素 |
| flex | ✅ | ✅ | 弹性布局 |
| grid | ✅ | ✅ | 网格布局 |
3. visibility 属性
visibility 控制元素是否可见，但与 display: none 有所不同：
▶ 示例
HTML
<style>
.hidden {
visibility: hidden; /* 元素不可见，但仍占据空间 */
}
.invisible {
display: none; /* 元素不可见，也不占据空间 */
}
</style>
<div class="hidden">隐藏元素</div>
<div class="invisible">不可见元素（占位隐藏）</div>
| 属性 | 是否可见 | 是否占据空间 | 是否可交互 |
|---|---|---|---|
display: none |
否 | 否 | 否 |
visibility: hidden |
否 | 是 | 否 |
visibility: visible |
是 | 是 | 是 |
4. 其他显示相关的属性
(1) opacity（透明度）
▶ 示例
HTML
<style>
.transparent {
opacity: 0.5; /* 50%透明，仍占据空间且可交互 */
background: #e74c3c;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="transparent">透明元素效果展示（半透明红色背景）</div>
(2) 元素隐藏的几种方式对比
▶ 示例
HTML
<style>
/* 方式1：不占据空间，完全移除 */
.hide-1 {
display: none;
}
/* 方式2：占据空间，不可见 */
.hide-2 {
visibility: hidden;
}
/* 方式3：占据空间，透明但可交互 */
.hide-3 {
opacity: 0;
}
/* 方式4：移出视口 */
.hide-4 {
position: absolute;
left: -9999px;
}
/* 方式5：针对可访问性的隐藏（屏幕阅读器可见） */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
<div class="hide-1">隐藏方案一</div>
<div class="hide-2">隐藏方案二</div>
<div class="hide-3">隐藏方案三</div>
<div class="hide-4">隐藏方案四</div>
<div class="sr-only">仅屏幕阅读器可见</div>
❓ 常见问题
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 之间的空格间隙问题。
