CSS Display 属性
CSS display 属性详解 · 难度：进阶 · +15XP
CSS display 属性详解
display 是 CSS 中最重要的属性之一，它决定了元素的盒子类型和布局行为。理解和灵活运用 display 值，是掌握 CSS 布局的核心。
display 常用值分类
| 类别 | 值 | 行为 |
|---|---|---|
| 无 | none | 移除元素（不占空间） |
| 块级 | block | 独占一行，可设置宽高 |
| 行内 | inline | 同行排列，宽高由内容决定 |
| 行内块 | inline-block | 同行排列但可设置宽高 |
| 弹性布局 | flex | 一维弹性容器（推荐） |
| 网格布局 | grid | 二维网格容器（推荐） |
| 行内弹性 | inline-flex | 行内级弹性容器 |
| 行内网格 | inline-grid | 行内级网格容器 |
display: flex（弹性布局）
Flex 是当今最常用的布局方式，用于一维排列（行或列）。
.flex-container {
display: flex;
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
gap: 20px; /* 间距 */
flex-wrap: wrap; /* 允许换行 */
}
.flex-item {
flex: 1; /* 等分剩余空间 */
}
.flex-item.fixed {
flex: 0 0 200px; /* 固定宽度 200px */
}
display: grid（网格布局）
Grid 是用于二维布局（行和列同时控制）的强大工具。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三等分列 */
grid-template-rows: auto 200px; /* 第一行自动，第二行 200px */
gap: 20px; /* 行列间距 */
}
.grid-item.span-2 {
grid-column: span 2; /* 跨越 2 列 */
}
.grid-item.span-row {
grid-row: span 2; /* 跨越 2 行 */
}
display: none vs visibility: hidden
.hidden-display {
display: none; /* 元素完全移除，不占空间 */
}
.hidden-visibility {
visibility: hidden; /* 元素不可见，但仍占用空间 */
}
.transparent {
opacity: 0; /* 元素透明，仍占空间，可交互 */
}display 值对比表
| display 值 | 换行 | 设置宽高 | 常用场景 |
|---|---|---|---|
| block | 是 | 可以 | div、p、section、header |
| inline | 否 | 不可以 | span、a、em、strong |
| inline-block | 否 | 可以 | 按钮、标签、导航项 |
| none | — | — | 隐藏元素、条件渲染 |
| flex | 是 | 通过 flex 属性 | 导航栏、卡片列表、居中 |
| grid | 是 | 通过 grid 属性 | 页面布局、画廊、仪表盘 |
Flex vs Grid 选择指南
| 场景 | 推荐 | 原因 |
|---|---|---|
| 导航栏横排 | Flex | 一维排列，简单直接 |
| 卡片列表 | Flex/Grid | flex-wrap 或 auto-fit |
| 页面整体布局 | Grid | 二维行列控制更灵活 |
| 居中单个元素 | Flex/Grid | 两者都可轻松居中 |
| 瀑布流布局 | Grid | grid-template-rows: masonry |
???? 练习
- 用 display: flex 创建一个水平居中对齐的导航栏
- 用 display: grid 创建三列等宽的卡片网格布局
- 对比 display: none 和 visibility: hidden 的区别
- 将 5 个 inline 元素转换为 inline-block，观察宽高变化
- 用 Grid 的 grid-column 和 grid-row 创建一个杂志风格布局