当前位置：首页 > article >正文

CSS display有几种属性值

article 2025/9/12 22:08:23

在 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`	处理浮动、子元素渲染