[!info] related notes

• 所属总入口：CSS MOC
• 对象介绍：CSS
• 阶段地图：CSS 层叠与选择器 MOC · CSS 盒模型与布局 MOC · CSS 响应式与视觉 MOC · CSS 工程化 MOC
• 相邻：HTML 学习路线 · Tailwind 学习路线 · 前端基础 MOC

CSS 学习路线 MOC

这个概念为什么出现

没有依赖顺序时，CSS 学习会变成属性速查：会抄 Flex 却不懂层叠，会写动画却不会控制包含块，会上 Tailwind 却不懂设计 token 与层叠上下文。本路线把「从零到可交付页面样式」拆成七个阶段。

[!abstract] 路线结论 先建立“选择器 + 层叠 + 盒模型”的默认心智，再学文档流与定位，随后进入 Flex/Grid 现代布局；响应式与视觉效果建立在布局稳定之后，最后用变量、方法论与工具链（含 Tailwind）进入工程化。

整条路线围绕五个问题：

1. 为什么最终样式是层叠计算的结果，而不是“最后一行一定赢”
2. 盒模型与包含块如何决定尺寸
3. 文档流、定位、Flex、Grid 各自解决什么布局问题
4. 响应式是断点堆砌还是约束系统设计
5. 工具类/CSS-in-JS/预处理器如何接回 CSS 本体

如何使用这份路线

场景	做法
从零开始	按阶段顺序；每篇在浏览器 DevTools 验证计算样式
已会抄布局	回补阶段一/二，再进工程化
主攻 Tailwind	至少完成阶段一到四，再进 Tailwind 学习路线

难度标记

• L1 入门 · L2 基础巩固 · L3 核心心智 · L4 工程 · L5 进阶细节

依赖关系总图

flowchart TD
    S1["阶段一 选择器与层叠"] --> S2["阶段二 盒模型与文档流"]
    S2 --> S3["阶段三 现代布局"]
    S3 --> S4["阶段四 响应式"]
    S3 --> S5["阶段五 视觉与动效"]
    S4 --> S6["阶段六 工程化"]
    S5 --> S6
    S6 --> S7["阶段七 真实项目样式能力"]

阶段与子 MOC 对照

阶段	目标	主要子 MOC
一	选择器、层叠、继承、优先级	层叠与选择器 MOC
二	盒模型、文档流、定位、BFC	盒模型与布局 MOC
三	Flex、Grid、居中与常见版式	盒模型与布局 MOC
四	单位、媒体查询、响应式策略	响应式与视觉 MOC
五	文本、颜色、变换、过渡、动画	响应式与视觉 MOC
六	变量、BEM、Modules、工具链、Tailwind	CSS 工程化 MOC
七	表单样式、打印、组件级实践	CSS MOC · Tailwind

---

阶段一：选择器与层叠

目标：能解释“这条规则为什么生效”。

完成标准：

• 能计算常见优先级冲突
• 能区分继承属性与非继承属性
• 会用 DevTools 看 computed / 被覆盖规则

序号	笔记	核心问题	难度	源码
1.1	CSS	CSS 是什么	L1	否
1.2	选择器	如何选中元素	L1	否
1.3	伪类与伪元素	状态与片段如何选中	L2	否
1.4	优先级与特异性	冲突如何裁决	L3	建议
1.5	层叠、继承与源顺序	层叠全流程	L3	建议

---

阶段二：盒模型与文档流

目标：理解元素占位与定位参照。

完成标准：

• 能说明 content-box / border-box
• 能解释 margin 折叠与 BFC
• 能判断 position 各值的包含块

序号	笔记	核心问题	难度	源码
2.1	盒模型	宽高由哪些盒子组成	L2	否
2.2	box-sizing	尺寸计算口径	L1	否
2.3	文档流、display 与定位	正常流如何排布	L3	建议
2.4	position	定位模式	L2	否
2.5	BFC	块格式化上下文	L3	建议
2.6	基线与 vertical-align	行内对齐	L3	否
2.7	overflow 与滚动容器	溢出与滚动	L2	否
2.8	margin 塌陷	垂直外边距合并	L2	否

---

阶段三：现代布局

目标：用 Flex/Grid 解决一维/二维布局。

完成标准：

• 能独立完成常见中轴居中与圣杯/侧栏布局
• 能说明 Flex 与 Grid 的选型边界
• 不把 float 当现代主布局

序号	笔记	核心问题	难度	源码
3.1	Flex 布局	一维分布与对齐	L2	否
3.2	Flexbox 细节	Flex 算法细节	L3	建议
3.3	Grid 布局	二维轨道布局	L2	否
3.4	Grid 细节	网格定义与区域	L3	建议
3.5	居中布局	居中方案选择	L2	否
3.6	两栏布局	常见版式	L2	否

---

阶段四：响应式

目标：按约束设计自适应界面。

完成标准：

• 能在 rem/em/vw 等单位间选择
• 能写移动优先媒体查询
• 知道容器查询的适用场景

序号	笔记	核心问题	难度	源码
4.1	单位与响应式尺寸	单位语义	L2	否
4.2	响应式布局	断点与策略	L2	否
4.3	rem/em/px	相对单位对照	L1	否

---

阶段五：视觉与动效

目标：在不破坏可访问与性能的前提下做视觉反馈。

完成标准：

• 能区分 transition / animation / transform
• 知道哪些属性更适合做动画
• 能为状态伪类设计交互反馈

序号	笔记	核心问题	难度	源码
5.1	文本与视觉样式	文本与外观	L2	否
5.2	CSS 变量	自定义属性	L2	否
5.3	transform	变换	L2	否
5.4	transition	过渡	L2	否
5.5	animation	关键帧动画	L2	否
5.6	创建 CSS 动画	实操	L2	否
5.7	伪类状态设计	交互状态	L3	否

---

阶段六：工程化

目标：让样式可扩展、可协作、可构建。

完成标准：

• 能解释 BEM / Modules / utility-first 的取舍
• 能在项目中使用 CSS 变量做主题
• 知道 PostCSS/Sass/Tailwind 的位置

序号	笔记	核心问题	难度	源码
6.1	BEM	命名约定	L2	否
6.2	CSS Modules	局部作用域	L2	否
6.3	CSS-in-JS	运行时/编译时样式	L3	否
6.4	Sass/SCSS	预处理器	L2	否
6.5	PostCSS	转换管线	L2	否
6.6	样式方案演进与选型	方案对比	L3	否
6.7	工具类与关注点分离	utility 争议	L3	否
6.8	Tailwind CSS	工具类框架入口	L2	否
6.9	Tailwind 学习路线	系统学习	L2	否

---

阶段七：真实项目样式能力

目标：覆盖表单、打印、半像素等工程场景。

序号	笔记	核心问题	难度	源码
7.1	表单样式	控件美化边界	L2	否
7.2	打印样式	print 媒体	L2	否
7.3	0.5px 边框	高分屏细节	L3	否
7.4	文本溢出	省略与多行截断	L2	否

---

如果只抓主干，优先这 8 个主题

1. 优先级
2. 层叠与继承
3. 盒模型
4. 文档流与定位
5. Flex
6. Grid
7. 响应式布局
8. CSS 变量

0 到 1 的完成标准

• 能解释一条样式冲突的层叠结果
• 能不靠框架完成两栏 + 响应式布局
• 能用变量实现浅/深主题切换雏形
• 能说明何时用 Flex 何时用 Grid
• 能评估 Tailwind/Modules 的适用场景

认知跳跃提醒

1. 未懂层叠就上 !important → 先 1.4 / 1.5
2. 未懂盒模型就调 margin 玄学 → 先 2.1 / 2.5
3. 未懂布局就堆绝对定位 → 先 2.3 / 3.1 / 3.3
4. 未懂 CSS 本体就只背 Tailwind class → 先阶段一到四，再 Tailwind 路线

相关入口

• 总地图：CSS MOC
• 对象定位：CSS
• 工具类分支：Tailwind 学习路线

自测题

1. 为什么响应式阶段放在 Flex/Grid 之后？
2. Tailwind 为什么挂在工程化而不是阶段一？

答案

1. 响应式是在稳定布局模型上施加约束，而不是替代布局模型。
2. Tailwind 是工作流与设计系统层；先懂 CSS 计算与布局，工具类才不会变成黑盒字符串。