CSS

CSS 的整体知识框架与学习顺序，串起选择器、层叠、盒模型、文档流、布局、响应式、动画和工程化实践。

#type / synthesis #status / evergreen #resource / css #tech / dev / frontend

[!info] related notes

所属 MOC: CSS MOC

核心概念: 盒模型, 样式优先级和特异性

布局主线: 文档流、display 与定位, Flex 布局, Grid 布局

CSS

CSS 不是一堆零碎属性，而是一整套围绕“选中元素、决定样式、计算空间、组织布局、控制表现”的规则系统。

先抓住 8 个模块

语法与选择器
层叠、继承、优先级
盒模型
文档流与定位
布局系统
视觉样式
响应式设计
动画与工程化

学 CSS 时真正要回答的 4 个问题

这个元素被谁选中了？
为什么最终是这个样式，而不是另一个？
这个元素的宽高和间距怎么算？
这个元素为什么出现在这里？

大多数 CSS 问题，本质上都能回到这 4 个问题。

这套知识怎么分层

第一层：选中谁

基础选择器：标签、类、ID、通配符
组合选择器：后代、子元素、相邻兄弟、通用兄弟
属性选择器
伪类与伪元素

这层决定“样式作用于谁”。

第二层：为什么生效

层叠
继承
优先级
源顺序

这层决定“多个规则冲突时，最终谁赢”。

第三层：占多少空间

盒模型
width / height
padding / border / margin
box-sizing
外边距塌陷

这层决定“这个盒子到底多大、间距怎么计算”。

第四层：怎么排

文档流
display
position
float
BFC
Flex
Grid

这层决定“元素在页面里怎么排列，为什么会出现在这个位置”。

第五层：长什么样

字体与排版
颜色
背景
边框
圆角
阴影

这层决定“外观和可读性”。

第六层：怎么适配

%
rem
vw/vh
媒体查询
弹性布局

这层决定“页面在不同屏幕下还能不能保持结构合理”。

第七层：怎么动

transition
transform
animation

这层决定“状态变化和动效表现”。

第八层：怎么写得久

命名规范
组件化拆分
CSS 变量
预处理器与原子化工具
性能意识
前端样式方案演进与选型

这层决定“代码是否可维护”。

一条推荐主线

最值得优先掌握的内容

如果你时间有限，优先拿下：

选择器与优先级
盒模型与 box-sizing
文档流、display、position
Flex
Grid
响应式

因为真正高频的问题几乎都落在：

布局
对齐
间距
层级
自适应

学习时最容易混淆的点

margin 和 padding：外部间距 vs 内部留白
absolute 相对谁定位：最近的非 static 祖先
flex: 1：不是“宽度 100%”，而是参与剩余空间分配
100% 和 100vh：相对父元素 vs 相对视口
overflow: hidden：不只是裁剪，还常常伴随布局隔离

实战导向的学习建议

真正掌握 CSS，不是背属性，而是反复做这些页面：

登录页
导航栏
卡片列表
后台管理布局
响应式商品列表
弹窗 / 抽屉 / Tooltip
表单页面

因为 CSS 最后都会落在：

布局
对齐
间距
层级
适配
动效

Flex布局

CSS