CSS display有几种属性值

在 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 值，可以大幅提升布局效率和代码可维护性。