display 与文档流 - CSS 教程

讲解

display 决定元素在布局中的角色，最核心的三个值是 block、inline、inline-block。块级（block，如 div、p、h1）独占一行、可设宽高、默认宽度撑满父容器；行内（inline，如 span、a、em）不独占行、宽高由内容决定、width/height 和上下 margin 设置无效、可以随文字换行；inline-block 是两者的合体——对外像行内元素一样排在文字流里不独占行，对内像块级一样可设宽高，头像、徽章、按钮常用它。

display: none 把元素从渲染树中彻底移除：不占空间、不可见、读屏软件也会跳过。它和 visibility: hidden（占位但不可见）、opacity: 0（占位、不可见、但仍可交互点击）是三件不同的事，按需求选用。还有个冷门的 display: contents：元素自身「消失」但子元素照常渲染并参与父级布局，做语义分组而不想引入额外盒子时有用。

理解 display 离不开「文档流」（normal flow）：块级盒子从上到下依次排列，行内盒子在一行内从左到右排、放不下就换行——所有默认布局都是这两条规则的产物。后面要学的 float（已被布局淘汰，只剩文字环绕用法）、position、Flexbox、Grid，本质上都是「让元素脱离或重组文档流」的不同方式。display 的现代值还有 flow-root（创建无副作用的块级格式化上下文，替代 clearfix hack）、list-item、以及 flex 和 grid——后两者各有两章专门展开。

示例

/* 块级：独占一行，可设宽高 */
.card {
  display: block;
  width: 320px;
  margin-bottom: 16px;
}

/* 行内元素想设尺寸：inline-block */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffe8cc;
}

/* 三种「隐藏」的区别 */
.gone {
  display: none; /* 彻底移除，不占位 */
}
.invisible {
  visibility: hidden; /* 占位但看不见，也不可点击 */
}
.ghost {
  opacity: 0; /* 占位、看不见、但仍挡点击 */
}

/* 行内元素强行变块：链接整行可点 */
.nav a {
  display: block;
  padding: 12px 16px;
}

/* 创建块级格式化上下文（代替 clearfix） */
.clearfix-modern {
  display: flow-root;
}

常见坑

给 span 设宽高不生效：inline 元素忽略 width/height 和上下 margin。要么 inline-block，要么改 block。
inline-block 之间出现神秘缝隙：HTML 里标签之间的换行/空格会被渲染成一个空格字符，元素间多出几像素间隙。对策：父元素 font-size: 0（子元素再设回）、标签紧挨写、或干脆用 Flexbox。
用 display: none 做过渡动画：none 不可过渡，元素会瞬间消失。要动画用 opacity/visibility 或现代 CSS 的 transition-behavior: allow-discrete。
vertical-align 用在块级元素上：它只对行内/表格单元格生效，块级元素「垂直居中」请用 Flexbox（后面章节），别再被 vertical-align: middle 折磨。
滥用 display: contents：它会让元素自身的背景、边框、点击区域全部消失，且旧浏览器有无障碍 bug（已修复），用前确认场景。

小结

block 独占行、inline 随文排、inline-block 两者兼备；none 移除、visibility 占位、opacity 还挡点击；文档流是所有布局的默认值。下一章学习让元素脱离文档流的第一种方式：定位。