在 CSS 中，display 属性是控制元素布局和渲染方式的核心属性之一。它有多种属性值，每个值都决定了元素在文档流中的表现形式。以下是 display 的主要属性值分类及说明：
1. 块级和行内布局
块级元素 (block)
- 特性：独占一行，可设置宽高，宽度默认占满父容器。
- 示例：
<div>,<p>,<h1>,<ul>等。
行内元素 (inline)
- 特性：不会换行，宽度由内容决定，无法设置宽高（仅受
padding、margin水平方向影响）。 - 示例：
<span>,<a>,<img>,<input>等。
行内块元素 (inline-block)
- 特性：不换行，但可设置宽高，像单行内的块级元素。
- 示例：按钮、输入框常使用此值。
2. 弹性布局 (flex) 和网格布局 (grid)
Flexbox (display: flex / inline-flex)
- 特性：一维布局模型，适合按行或列排列子元素。
- 应用：导航栏、卡片布局、自适应组件。
Grid (display: grid / inline-grid)
- 特性：二维布局模型，同时处理行和列。
- 应用：复杂网格、响应式布局。
3. 表格布局
表格相关值
table：类似<table>标签。table-row：类似<tr>标签。table-cell：类似<td>标签。- 应用：老式表格布局（现代优先使用
flex/grid）。
4. 隐藏元素
none
- 特性：元素完全从文档流中移除，不占据空间。
- 对比：
visibility: hidden仍占据空间，但不可见。
5. 多列布局
column 相关值
inline-column：实验性值，类似column但为行内模式。- 应用：报纸式多列文本布局（需配合
column-count等属性）。
6. 其他布局模式
浮动和绝对定位
flow-root：创建 BFC（块级格式化上下文），清除浮动影响。- 应用：父元素包含浮动子元素时防止高度塌陷。
混合值
run-in：根据上下文变为块级或行内元素（兼容性差，少用）。
7. 实验性和特殊值
contents：元素本身不渲染，仅渲染子元素（兼容性有限）。ruby,ruby-base,ruby-text：用于日语注音（小文字）排版。
示例代码
css
.block {
display: block; /* 块级元素 */
}
.inline {
display: inline; /* 行内元素 */
}
.flex-container {
display: flex; /* Flexbox 容器 */
}
.grid-container {
display: grid; /* Grid 容器 */
}
.hidden {
display: none; /* 完全隐藏元素 */
}
.clear-float {
display: flow-root; /* 清除浮动 */
}
总结
| 分类 | 属性值 | 核心作用 |
|---|---|---|
| 基础布局 | block, inline, inline-block | 控制元素的基本显示模式 |
| 弹性布局 | flex, inline-flex | 一维灵活布局 |
| 网格布局 | grid, inline-grid | 二维网格布局 |
| 表格布局 | table, table-row, table-cell | 模拟表格结构 |
| 隐藏元素 | none | 完全移除元素 |
| 特殊布局 | flow-root, contents | 处理浮动、子元素渲染 |
现代 CSS 中，flex 和 grid 是构建复杂布局的首选方式，而传统的表格布局和浮动已逐渐被淘汰。根据具体需求选择合适的 display 值，可以大幅提升布局效率和代码可维护性。
