display

用于定义元素的显示方式和布局模式。

常用属性值

属性值	作用描述
block	块级元素，独占一行，可设置宽高。默认宽度撑满父容器。
inline	行内元素，不换行，不可设置宽高（宽高由内容决定）。
inline-block	行内块，可设置宽高，不独占一行（兼具块级和行内特性）。
none	不显示且不占空间（完全隐藏）。
flex	弹性容器，子元素一维弹性布局。
inline-flex	行内弹性容器，容器表现像 inline-block，内部 Flexbox。
grid	网格容器，子元素二维网格布局。
contents	元素自身不渲染，子元素提升到父级层级。

块级格式化上下文 (BFC)

BFC 是一个独立的渲染区域，内部布局不影响外部。

触发 BFC 的条件

/* 以下任一条件都会创建新的 BFC */
overflow: hidden;        /* 或 auto/scroll/overlay */
display: flow-root;      /* 专门用于创建 BFC，推荐 */
position: absolute;      /* 或 fixed */
float: left;             /* 或 right */
display: inline-block;
display: flex;
display: grid;
contain: layout;

BFC 的效果

• 清除浮动：BFC 容器会包含浮动子元素
• 外边距折叠：同一 BFC 内相邻块级元素的 margin 会折叠，不同 BFC 不会
• 阻止元素被浮动元素覆盖

/* 经典应用：清除浮动 */
.container {
  display: flow-root; /* 创建 BFC，无需 clearfix hack */
}

行内格式化上下文 (IFC)

行内元素在一行内水平排列，由 IFC 管理。line-height、vertical-align 等属性在 IFC 中生效。

布局选择决策

场景	推荐
简单行排列、对齐、分配空间	display: flex
复杂行列网格	display: grid
传统文档流	display: block
行内文本修饰	display: inline / inline-block

/* flex：一维布局，适合导航栏、卡片行 */
.nav { display: flex; gap: 1rem; }

/* grid：二维布局，适合页面骨架、仪表盘 */
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

display: contents 行为

<div class="wrapper" style="display: contents;">
  <p>这个 p 会表现得像 wrapper 不存在一样</p>
</div>

• 元素自身的盒模型被移除，子元素直接参与父级布局
• 常见用途：语义化包装元素不影响 Flex/Grid 子项
• 注意：会影响无障碍访问，部分浏览器对 contents 的键盘导航有 bug

Related notes

• CSS MOC
• CSS 居中布局
• 盒模型