第 10 章 元素的显示与隐藏
display:none 让元素不生成盒，visibility:hidden 保留布局盒并让可见性可被后代覆盖；隐藏策略还会影响事件命中、可访问树、资源加载和表格 collapse 行为。
直觉起点
、、、、共同构成本页的观察坐标。display:none 让元素不生成盒，visibility:hidden 保留布局盒并让可见性可被后代覆盖；隐藏策略还会影响事件命中、可访问树、资源加载和表格 collapse 行为。 CSS 的困难不在属性名称，而在多个声明经过级联、继承和格式化后才产生最终使用值；同一截图可能由完全不同的盒树、固定尺寸或偶然层叠得到，必须向前追踪原因。
六阶段机制链
1. 决定是否生成盒
固定 DOM、样式表、视口、字体和内容，先预测生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。
2. 计算布局占位
只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。
3. 传播 visibility
只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。
4. 处理后代覆盖
只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。
5. 核对交互与可访问性
只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。
6. 比较 collapse
只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。恢复后重放同一输入，并确认窄宽、长内容和方向变化不会暴露旧补丁。
核心机制深挖
display 决定盒树中是否存在该元素，visibility 则在盒已经参与布局后控制绘制与命中。visibility 的后代可以重新 visible，因此它不是简单的整体透明。 选择隐藏方案前必须写明是否保留空间、是否允许后代出现、是否可聚焦、是否读屏可见以及是否继续加载资源；只比较视觉结果不够。 实验时把浏览器开发者工具中的盒模型、计算样式和层叠上下文当成观测工具，而不是答案来源；答案必须能从规范规则和当前 DOM 结构推导出来。先删除非必要覆盖，再逐条加入约束，这样才能分辨默认流在做什么、哪条声明真正改变了结果。
边界记录模板
每次实验建立六列证据：DOM 与内容、生成盒与格式化上下文、包含块、计算值与使用值、首个偏离点、恢复结果。尺寸页增加视口与固有尺寸，内联页增加字体度量和基线，定位页增加脱流空间与四向偏移，层叠页增加上下文树，文本页增加字体回退，界面页增加键盘与书写方向。若最终外观相同但固定宽高、隐藏溢出、不可见焦点或错误层叠仍存在，依然失败。
出版社目录逐项讲解
第10章 元素的显示与隐藏
第10章 元素的显示与隐藏 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“决定是否生成盒”前后会生成哪些盒、读取哪个包含块，并记录“display:none”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。
10.1 display与元素的显隐
10.1 display与元素的显隐 要解决的是：比较盒是否生成、空间是否保留、后代可见性、事件命中与可访问性。先预测元素在“计算布局占位”前后会生成哪些盒、读取哪个包含块，并记录“visibility:hidden”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。
10.2 visibility与元素的显隐
10.2 visibility与元素的显隐 要解决的是：比较盒是否生成、空间是否保留、后代可见性、事件命中与可访问性。先预测元素在“传播 visibility”前后会生成哪些盒、读取哪个包含块，并记录“盒生成”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。
10.2.1 不仅仅是保留空间这么简单
10.2.1 不仅仅是保留空间这么简单 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“处理后代覆盖”前后会生成哪些盒、读取哪个包含块，并记录“可见性继承”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。
10.2.2 了解visibility:collapse
10.2.2 了解visibility:collapse 要解决的是：比较盒是否生成、空间是否保留、后代可见性、事件命中与可访问性。先预测元素在“核对交互与可访问性”前后会生成哪些盒、读取哪个包含块，并记录“visibility:collapse”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。
最小可运行实验
.removed[hidden] {
display: none;
}
.reserved {
visibility: hidden;
}
.reserved > .status {
visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
.reserved {
transition: none;
}
}book: CSS 世界
page: csw-10-display-visibility
public_toc_entries: 5
sample: normal | boundary | failure | recovery
first_divergence: null
box_tree_explained: true
used_values_explained: true
fluid_contract_preserved: truefreeze DOM + stylesheet + viewport + fonts
predict generated boxes + containing blocks
change exactly one variable
stop at the first divergent used value
restore and replay the same DOM
assert fluid layout across content and directions常见误区与故障注入
四类样本与验收
| 样本 | 注入方式 | 必查证据 | 通过条件 |
|---|---|---|---|
| 正常 | 标准字体、常规内容和宽视口 | 盒、包含块、使用值、行框、层级 | 六阶段按预期完成 |
| 边界 | 窄视口、长内容、替换元素、字体缺失 | min/max、溢出、基线和回退 | 不依赖固定像素补丁 |
| 失败 | 单一脱流、错误层叠、隐藏焦点或错方向 | 首个偏离点 | 能定位并解释根因 |
| 恢复 | 删除故障声明后重放同一 DOM | 盒树和计算样式 | 无旧覆盖且流体契约恢复 |
本页签发不变量是：display:none 让元素不生成盒，visibility:hidden 保留布局盒并让可见性可被后代覆盖；隐藏策略还会影响事件命中、可访问树、资源加载和表格 collapse 行为。 单次截图不能替代盒生成、格式化上下文、包含块、计算值、使用值与绘制顺序的完整轨迹。
练习
小结
- display:none：对应“决定是否生成盒”阶段的核心观察量。
- visibility:hidden：对应“计算布局占位”阶段的核心观察量。
- 盒生成：对应“传播 visibility”阶段的核心观察量。
- 可见性继承：对应“处理后代覆盖”阶段的核心观察量。
- visibility:collapse：对应“核对交互与可访问性”阶段的核心观察量。
- 5 个公开目录条目已经全部映射到本页证据链。
- 盒树、使用值和边界样本共同决定是否通过，最终截图不是唯一证据。
术语表
版本与改编边界
本单元以张鑫旭著《CSS 世界》为身份基线。详细目录来自人民邮电出版社出版电子版页面，CSS 2.1 定位由作者官网和图书官网交叉确认；正文是独立教学重构，不复制原书段落。现代浏览器兼容状态需另行按当前 CSS 规范和浏览器文档核验。