CSS MOC
CSS 的学习入口与知识地图，按选择器、层叠、盒模型、文档流、布局、响应式、动画和工程化组织阅读路径。
#type / moc
#status / evergreen
#resource / css
#tech / dev / frontend
[!info] related notes
- 总览入口: CSS
- 学习路线: CSS 学习路线 MOC
- 前端基础入口: 前端基础 MOC
- 面试入口: 前端八股文 MOC
- 工具类分支: Tailwind MOC
CSS MOC
CSS 既是样式语言，也是布局系统。这个 MOC 的目标不是重复讲所有属性，而是给出一条清晰的学习路径和主题地图。
先看哪几篇
如果你是第一次系统学 CSS，建议先看：
阶段子 MOC
按目标选择起点
想先建立整体框架
想先理解“为什么样式是这个结果”
想先理解“元素为什么在这里”
想先学现代布局
想先学视觉效果和动效
- CSS 文本与视觉样式
- 文本溢出、省略与 line clamp
- background-size 与 object-fit
- 伪类状态设计
- CSS 表单样式
- css-animation
- css-transition
- css-transform
想先看工程化和工具
- 前端样式方案演进与选型
- BEM 命名规范
- CSS Modules
- CSS-in-JS
- sass-scss
- postcss
- tailwind
- unocss
- css-utility-classes-separation-of-concerns-review
核心地图
1. 选择器、层叠与优先级
- CSS - 整体知识框架
- CSS 选择器、伪类与伪元素
- 样式优先级和特异性
- CSS 层叠、继承与源顺序
这一组解决：
- 元素被谁选中
- 多个规则冲突时为什么是这个结果
2. 空间计算与盒模型
这一组解决：
- 元素实际占多少空间
width、padding、border怎么一起计算
3. 文档流、显示模式与定位
这一组解决：
- 块元素和行内元素怎么排
- 文字、图标、按钮为什么看起来不在一条线上
- 定位、浮动、BFC 为什么会改布局结果
4. 现代布局系统
这一组解决：
- 一维布局怎么做
- 行内弹性容器怎么用
- 二维布局怎么做
- 什么时候选 Flex，什么时候选 Grid
5. 响应式与适配
这一组解决：
- 多端适配
- 媒体查询
- 相对单位和弹性布局的配合
6. 视觉与动效
- css-animation
- css-transition
- css-transform
- CSS 文本与视觉样式
- 文本溢出、省略与 line clamp
- background-size 与 object-fit
- 伪类状态设计
- CSS 表单样式
- 重排与重绘
- creating-a-css-animation
- CSS 0.5px 边框
- UI 设计中的间距管理
- UI 设计中手机端的间距管理
这一组解决：
- 状态过渡
- 位移、缩放、旋转
- 什么时候该用
transform/opacity
7. 工程化与维护
- 前端样式方案演进与选型
- BEM 命名规范
- CSS Modules
- CSS-in-JS
- sass-scss
- postcss
- tailwind
- unocss
- css-utility-classes-separation-of-concerns-review
- Tailwind CSS 打印与 PDF 导出
这一组解决：
- CSS 怎么拆分
- 样式怎么避免污染
- 变量、预处理器、原子化工具怎么选
一条推荐学习路线
- CSS：先建立总框架
- 样式优先级和特异性：先搞清楚为什么会冲突
- 盒模型：再搞清楚空间计算
- 文档流、display 与定位：理解默认排列和脱离文档流
- Flex 布局：掌握最常用的一维布局
- Grid 布局：掌握二维布局
- 网页的响应式布局（网页平板手机）：补适配
- css-animation / css-transition / css-transform：最后补动效
学 CSS 时最容易卡住的地方
- 只记属性，不理解文档流和布局逻辑
- 只背优先级，不知道层叠和源顺序怎么一起决定结果
- Flex 和 Grid 学了 API，但不会根据问题选布局工具
- 会写静态页面，但一到响应式、滚动容器、层级覆盖就混乱