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

在这里插入图片描述

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

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

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

模拟表格布局的元素：

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

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

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

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

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

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

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