CSS `display` 属性详解（完整版）

CSS display 属性详解（完整版）

---

1. 属性值及特性详解

display 属性控制元素的布局类型和生成的框类型，以下是 所有有效值 及其特性：

---

1.1 基础类型

值	描述	布局行为	是否生成块级框	典型用途
block	元素独占一行，宽度自动撑满父容器	自动换行，可设置宽高	是	容器元素（如 div, header）
inline	与相邻元素同行，宽度由内容决定	不换行，不可设置宽高	否	内联元素（如 span, a）
inline-block	结合 block 和 inline 特性	可设置宽高，与文本同行	否	图标+文字组合
none	隐藏元素，且不参与布局	完全移除元素	-	动态隐藏元素

---

1.2 弹性 & 网格布局

值	描述	布局行为	兼容性注释
flex	定义弹性容器，子元素为 Flex 项	通过 flex-direction 等控制排列方向	需 -webkit- 前缀支持旧版
inline-flex	内联弹性容器，不独占一行	类似 flex，但与文本同行	同上
grid	定义网格容器，子元素为 Grid 项	通过 grid-template-columns 等定义网格	需 -ms- 前缀支持旧版
inline-grid	内联网格容器，不独占一行	类似 grid，但与文本同行	同上

---

1.3 表格相关类型

模拟表格布局的元素：

值	类似 HTML 标签	布局行为
table	<table>	作为表格容器
table-row	<tr>	表示表格行
table-cell	<td> 或 <th>	表示表格单元格
table-row-group	<tbody>	表格行组（如 <thead>, <tbody>）
table-header-group	<thead>	表格表头组
table-footer-group	<tfoot>	表格表尾组
table-column	<col>	定义表格列
table-column-group	<colgroup>	定义列组

---

1.4 其他特殊值

值	描述	特殊行为
contents	元素自身消失，子元素继承父级样式	类似“拆解”元素，常用于替换容器结构
list-item	生成列表项（如 <li>）	自动添加项目符号（可通过 list-style 控制）
run-in	尝试以内联形式“跑入”前/后元素	若前后元素为块级，则自身转为块级；若为内联，则合并到内联元素中

---

1.5 过时值（已弃用）

值	替代方案
inline-table	使用 display: table + 宽度设置
compact	不推荐，可用 margin 替代

---

2. 组合使用场景

• inline-flex vs flex

  • flex: 独占一行，适合容器布局（如导航栏）。
  • inline-flex: 与文本同行，适合内联弹窗或工具栏。

• table-cell 组合

css
  .table-container { display: table; width: 100%; }
  .row { display: table-row; }
  .cell { display: table-cell; }

模拟表格布局，避免使用真实表格标签。

• flex 与 none 组合
  隐藏 Flex 子项但保留布局空间：

css
  .hidden-item { display: none; }  /* 完全隐藏，不占位 */
  .invisible-item { visibility: hidden; }  /* 隐藏但保留空间 */

3. 完整对比表格

值	布局类型	是否生成块级框	是否占位	常见用途	兼容性
block	块级	是	是	容器元素	全部支持
inline	内联	否	是	文本元素	全部支持
inline-block	内联块级	否	是	图标+文字组合	全部支持
flex	弹性容器	是	是	响应式布局	需前缀（旧版）
inline-flex	内联弹性	否	是	内联弹窗	需前缀（旧版）
grid	网格容器	是	是	复杂布局（如卡片列表）	需前缀（旧版）
inline-grid	内联网格	否	是	内联网格	需前缀（旧版）
table	表格容器	是	是	替代 <table>	全部支持
table-cell	表格单元格	否	是	表格布局单元格	全部支持
contents	透明容器	否	否	替换容器结构	部分现代浏览器支持
none	隐藏元素	-	否	动态隐藏元素	全部支持

---

4. 注意事项

• display: contents 的风险：元素消失后，子元素会继承父级样式，可能导致布局混乱。
• run-in 的局限性：浏览器支持有限，且行为复杂，建议避免使用。
• 响应式设计：通过 @media 结合 display 可切换布局模式（如移动端 block → 桌面端 inline-block）。