《CSS 世界》权威学习地图

张鑫旭原著以 CSS 2.1 的“流”为世界观，从术语与基本尺寸进入四大盒尺寸、内联、浮动定位、层叠、文本、装饰、显隐、界面和书写方向；Flex、Grid、transform 与 animation 不属于本书章节。

直觉起点

、、、、共同构成本页的观察坐标。张鑫旭原著以 CSS 2.1 的“流”为世界观，从术语与基本尺寸进入四大盒尺寸、内联、浮动定位、层叠、文本、装饰、显隐、界面和书写方向；Flex、Grid、transform 与 animation 不属于本书章节。 CSS 的困难不在属性名称，而在多个声明经过级联、继承和格式化后才产生最终使用值；同一截图可能由完全不同的盒树、固定尺寸或偶然层叠得到，必须向前追踪原因。

六阶段机制链

1. 核验 CSS 2.1 身份

固定 DOM、样式表、视口、字体和内容，先预测生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。

2. 建立流与盒模型

只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。一旦轨迹不同，保存首个偏离点，不用最终像素掩盖过程。

3. 推演尺寸和内联

4. 控制脱流与层叠

5. 组织文本与装饰

6. 验证界面和流向

只改变一个声明或环境变量，记录生成盒、包含块、格式化上下文、计算值、使用尺寸、行框和层叠位置。恢复后重放同一输入，并确认窄宽、长内容和方向变化不会暴露旧补丁。

核心机制深挖

本书不是现代属性大全，而是解释 CSS 2.1 各属性为何互相影响。学习顺序应从默认流和盒生成开始，再观察破坏流的浮动、定位和层叠，最后进入绘制与界面。每章都必须能回答元素生成什么盒、处于哪个格式化上下文、包含块是谁、使用尺寸如何得到、绘制在哪个层级，以及换方向或换内容后是否仍成立。实验时把浏览器开发者工具中的盒模型、计算样式和层叠上下文当成观测工具，而不是答案来源；答案必须能从规范规则和当前 DOM 结构推导出来。先删除非必要覆盖，再逐条加入约束，这样才能分辨默认流在做什么、哪条声明真正改变了结果。

边界记录模板

每次实验建立六列证据：DOM 与内容、生成盒与格式化上下文、包含块、计算值与使用值、首个偏离点、恢复结果。尺寸页增加视口与固有尺寸，内联页增加字体度量和基线，定位页增加脱流空间与四向偏移，层叠页增加上下文树，文本页增加字体回退，界面页增加键盘与书写方向。若最终外观相同但固定宽高、隐藏溢出、不可见焦点或错误层叠仍存在，依然失败。

出版社目录逐项讲解

第 1 章概述

第 1 章概述 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“核验 CSS 2.1 身份”前后会生成哪些盒、读取哪个包含块，并记录“CSS 2.1 世界”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 2 章需提前了解的术语和概念

第 2 章需提前了解的术语和概念 要解决的是：把规范词汇映射到指定值、计算值、使用值和实际值，拒绝依赖未定义结果。先预测元素在“建立流与盒模型”前后会生成哪些盒、读取哪个包含块，并记录“流”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 3 章流、元素与基本尺寸

第 3 章流、元素与基本尺寸 要解决的是：确定外在盒、内在盒、包含块与 auto/百分比计算，避免把声明值直接当成最终使用尺寸。先预测元素在“推演尺寸和内联”前后会生成哪些盒、读取哪个包含块，并记录“盒模型”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 4 章盒尺寸四大家族

第 4 章盒尺寸四大家族 要解决的是：确定外在盒、内在盒、包含块与 auto/百分比计算，避免把声明值直接当成最终使用尺寸。先预测元素在“控制脱流与层叠”前后会生成哪些盒、读取哪个包含块，并记录“格式化上下文”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 5 章内联元素与流

第 5 章内联元素与流 要解决的是：画出内容区域、行内盒、行框盒与基线，按字体度量解释垂直位置。先预测元素在“组织文本与装饰”前后会生成哪些盒、读取哪个包含块，并记录“使用值”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 6 章流的破坏与保护

第 6 章流的破坏与保护 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“验证界面和流向”前后会生成哪些盒、读取哪个包含块，并记录“CSS 2.1 世界”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 7 章 CSS 世界的层叠规则

第 7 章 CSS 世界的层叠规则 要解决的是：先建立层叠上下文树，再在同级比较层叠水平和绘制顺序。先预测元素在“核验 CSS 2.1 身份”前后会生成哪些盒、读取哪个包含块，并记录“流”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 8 章强大的文本处理能力

第 8 章强大的文本处理能力 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“建立流与盒模型”前后会生成哪些盒、读取哪个包含块，并记录“盒模型”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 9 章元素的装饰与美化

第 9 章元素的装饰与美化 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“推演尺寸和内联”前后会生成哪些盒、读取哪个包含块，并记录“格式化上下文”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 10 章元素的显示与隐藏

第 10 章元素的显示与隐藏 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“控制脱流与层叠”前后会生成哪些盒、读取哪个包含块，并记录“使用值”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 11 章用户界面样式

第 11 章用户界面样式 要解决的是：把该目录项放回正常流、盒生成、尺寸计算和格式化上下文，记录输入、约束与浏览器使用值。先预测元素在“组织文本与装饰”前后会生成哪些盒、读取哪个包含块，并记录“CSS 2.1 世界”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

第 12 章流向的改变

第 12 章流向的改变 要解决的是：按双向算法、书写模式、内联轴和块轴重算尺寸、顺序与对齐。先预测元素在“验证界面和流向”前后会生成哪些盒、读取哪个包含块，并记录“流”的计算值与使用值。正常样本只保留最小声明；边界样本改变容器宽度、内容长度、字体或书写方向；失败样本只引入一个脱流、溢出或层叠条件。清除故障后重放同一 DOM，只有盒树、尺寸、行框、层级和绘制结果都可解释才通过。

最小可运行实验

normal flow -> box generation -> used size -> inline formatting
float/position -> containing block -> stacking context
font/background -> paint -> visibility -> writing direction

book: CSS 世界
page: csw-official-learning-map
public_toc_entries: 12
sample: normal | boundary | failure | recovery
first_divergence: null
box_tree_explained: true
used_values_explained: true
fluid_contract_preserved: true

freeze 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	盒树和计算样式	无旧覆盖且流体契约恢复

本页签发不变量是：张鑫旭原著以 CSS 2.1 的“流”为世界观，从术语与基本尺寸进入四大盒尺寸、内联、浮动定位、层叠、文本、装饰、显隐、界面和书写方向；Flex、Grid、transform 与 animation 不属于本书章节。单次截图不能替代盒生成、格式化上下文、包含块、计算值、使用值与绘制顺序的完整轨迹。

练习

小结

CSS 2.1 世界：对应“核验 CSS 2.1 身份”阶段的核心观察量。
流：对应“建立流与盒模型”阶段的核心观察量。
盒模型：对应“推演尺寸和内联”阶段的核心观察量。
格式化上下文：对应“控制脱流与层叠”阶段的核心观察量。
使用值：对应“组织文本与装饰”阶段的核心观察量。
12 个公开目录条目已经全部映射到本页证据链。
盒树、使用值和边界样本共同决定是否通过，最终截图不是唯一证据。

术语表

版本与改编边界

本单元以张鑫旭著《CSS 世界》为身份基线。详细目录来自人民邮电出版社出版电子版页面，CSS 2.1 定位由作者官网和图书官网交叉确认；正文是独立教学重构，不复制原书段落。现代浏览器兼容状态需另行按当前 CSS 规范和浏览器文档核验。