CSS - INDEX - AI

28分钟阅读

Abstract

这篇笔记的目标不是把 CSS 的所有属性堆在一起，而是帮你建立一个“从 0 到 1 的整体地图”。 读完后，你应该能回答三个问题：

  1. CSS 到底在解决什么问题？
  2. 浏览器是怎么决定一个元素最终长什么样、摆在哪里的？
  3. 我应该按什么顺序继续深入学习？

来源笔记：CSS - INDEX

这篇笔记怎么读

如果你是初学者，建议按这个顺序读：

  1. 一、先把 CSS 看成什么
  2. 二、CSS 的总流程：浏览器到底做了什么
  3. 三、CSS 的六大核心模块
  4. 四、遇到 CSS 问题时的排查顺序
  5. 五、建议的学习路径

如果你已经学过一些零散知识，这篇笔记更适合拿来“补体系”。

一、先把 CSS 看成什么

一句话版：

HTML 负责定义内容，CSS 负责定义内容“怎么被看见”。

但“怎么被看见”其实不是只有“换颜色、加边框”这么简单。CSS 真正做的是下面几件事：

  1. 选中页面里的某些元素。
  2. 决定这些元素最终采用哪一条样式规则。
  3. 把元素当成一个个盒子来计算大小、间距和位置。
  4. 决定这些盒子如何排列。
  5. 决定这些盒子最终如何被绘制出来。
  6. 在不同设备、不同状态下，让它们产生变化和响应。

所以学习 CSS，真正需要建立的是一个心智模型：

Note

你可以把 CSS 记成六个问题： 选谁？ 哪条规则生效？ 盒子多大？ 盒子怎么排？ 盒子怎么画？ 盒子怎么变化？

这六个问题，就是下面整篇笔记的主线。

二、CSS 的总流程：浏览器到底做了什么

当浏览器拿到 HTML 和 CSS 后，大致会经历这样一条链路：

  1. 先解析 HTML，形成 DOM。
  2. 浏览器给元素套上一层默认样式，也就是用户代理样式表。
  3. 你的 CSS 开始匹配元素。
  4. 如果多条规则同时命中，就进入 级联 比较。
  5. 如果某些属性没有直接写，就可能走 CSS中的继承。
  6. 浏览器把元素当成一个个 盒子 来计算大小。
  7. 再根据文档流、定位、Flex、Grid 等规则决定布局。
  8. 再决定上下遮挡关系，也就是 层叠等级 和堆叠上下文。
  9. 最后才是绘制、合成、动画和交互。

所以很多初学者觉得“CSS 很玄学”，往往不是因为 CSS 本身难，而是因为他把这些步骤混在一起了。

比如下面这些问题，本质上其实分属不同层：

把问题放回正确层次，CSS 会清晰很多。

三、CSS 的六大核心模块

1. 选择：先回答“样式作用给谁”

这是 CSS 的入口。

核心问题只有一个：你到底选中了谁？

这里最重要的知识有：

你可以先把选择器理解成“筛子”：

  • 标签选择器：筛一类元素。
  • 类选择器：筛一批有共同身份的元素。
  • ID 选择器：筛一个明确对象。
  • 属性选择器：按特征筛。
  • 组合器：按结构关系筛。
  • 伪类：按状态筛。
  • 伪元素：按局部部位筛。

初学阶段最重要的不是背全，而是建立一个判断：

Tip

选择器解决的是“命中谁”，不是“最终谁说了算”。 “最终谁说了算”要交给下一部分的 级联。

另外，原笔记里提到的“嵌套”本质上不是新能力，而是写法更紧凑，本质仍然是在写选择器关系。

相关延伸：

2. 规则冲突：再回答“最终哪条样式生效”

这是 CSS 最核心的机制之一。

很多人学 CSS，学了一堆属性，但真正让样式“是否生效”的，是这一套决策系统：

你可以把它理解成浏览器在做一次“裁判判决”。

2.1 级联在解决什么

当多条规则同时作用到同一个元素、同一个属性时，浏览器必须选出唯一结果。

这时会比较：

  1. 来源和重要性。
  2. 特殊性，也就是选择器权重。
  3. 源顺序，也就是谁写在后面。

这就是 级联。

2.2 继承在解决什么

如果某个属性没有直接写在当前元素上，浏览器才会考虑能不能从父元素那里“继承”过来。

这就是 CSS中的继承。

要记住一个关键区别：

Note

级联 是“多条规则同时来抢一个位置时，谁赢”。 CSS中的继承 是“没人直接管我时，我能不能沿用父元素的值”。

常见的可继承属性通常和文本有关，比如：

  • color
  • font-size
  • font-family
  • line-height

常见的不可继承属性通常和盒子本身有关，比如：

  • width
  • height
  • margin
  • padding
  • border
  • background

2.3 初学者最容易卡住的点

你看到“样式没生效”时，优先问自己：

  1. 我真的选中了这个元素吗？
  2. 是不是被更强的规则覆盖了？
  3. 这个属性本来会不会继承？
  4. 我是不是误用了 !important？

相关延伸：

3. 盒模型：再回答“元素到底有多大”

学习 CSS 时，一个巨大的转折点是：

你要停止把元素看成“文字块”或“标签”，而开始把它看成盒子。

这就是 盒模型 的意义。

一个盒子由四层组成：

  1. content：内容区。
  2. padding：内边距。
  3. border：边框。
  4. margin：外边距。

相关基础笔记：

3.1 为什么同样写 width: 200px，结果不一样

因为你要先看当前盒子采用的是哪一种盒模型：

这就是 box-sizing 的区别。

现代项目里通常更偏向 border-box，因为它更符合“我看到的就是我设置的宽度”。

3.2 盒子的大小由什么决定

原笔记里很重要的一点是：

盒子的大小，一部分来自外部限制，一部分来自内部内容。

也就是：

  • 外部限制：width、height、max-width、min-width 等。
  • 内部内容：文字、图片、子元素的尺寸与排版行为。

所以当一个盒子“莫名其妙变大”，通常不是莫名其妙，而是：

  • 你没有限制它。
  • 子元素把它撑开了。
  • 它的布局模式决定它会自适应内容。

3.3 间距：margin 和 padding 到底怎么分

这也是新手高频混淆点。

  • padding 是“盒子内部的留白”。
  • margin 是“盒子外部和别人拉开的距离”。

记忆方法：

Tip

想让背景色一起被撑开，用 padding。 想让自己和别的元素隔开，用 margin。

再往后一点，需要理解这些补充点：

  • margin 可以为负值。
  • 块级元素之间可能发生 margin 折叠。
  • 在 Flex、Grid、绝对定位等场景下，很多传统的 margin 行为会变化。

相关延伸：

3.4 overflow：内容装不下怎么办

当盒子的尺寸被限制住，而内容又超过它时，就会发生溢出。

这时就要看 overflow：

  • visible
  • hidden
  • scroll
  • auto

这块知识和下面这些主题经常关联在一起：

4. 布局：再回答“盒子怎么排”

这是 CSS 里最容易“越学越乱”的部分，因为它涉及多个时代的布局方案。

一个更好的理解方式是：

布局不是一个属性，而是一整套“盒子如何参与排列”的规则。

4.1 先认识默认布局：文档流

所有布局的起点，是默认文档流，也就是 Nomal Flow。

默认情况下：

  • 块级元素从上到下排。
  • 行内内容从左到右排。

这就是你理解后面所有布局方式的起点。

4.2 早期布局：float

float 和 CSS当中的浮动 是旧时代非常重要的布局方式。

今天它不再是主力布局工具，但你仍然需要理解它，因为：

  1. 老项目里还在用。
  2. 它会引出 BFC、清除浮动、高度塌陷这些经典问题。

4.3 现代一维布局：Flex

如果你要在一个方向上排一组元素，优先想到 Flex。

它非常适合：

  • 水平排列
  • 垂直排列
  • 居中
  • 拉伸
  • 分配剩余空间

相关笔记：

4.4 现代二维布局：Grid

如果你要同时控制“行”和“列”，优先想到 Grid。

相关笔记：

4.5 格式化上下文：为什么有时像进了另一个世界

这是原笔记里非常重要、也非常容易被忽略的概念。

格式化上下文 可以理解成一个“局部布局结界”。

一旦一个区域形成了独立的格式化上下文，它内部的布局规则和外部会有明显区别。

最常见的就是：

你需要重点记住 BFC 的价值：

  1. 可以包住浮动元素。
  2. 可以阻止一些外边距问题。
  3. 可以形成更独立的布局环境。

4.6 包含块：定位和尺寸到底参考谁

包含块 是定位类问题的根源概念。

很多时候你以为元素“相对父元素定位”，其实更准确的说法是：

元素在根据它的包含块定位。

特别是这些情况必须分清：

  • 普通流元素参考谁。
  • absolute 参考谁。
  • fixed 通常参考谁。
  • 什么情况下祖先元素会意外变成它的参考系。

相关延伸：

5. 定位与层叠：再回答“它为什么在这里、为什么压在上面”

很多 CSS 疑难杂症，其实都出在这部分。

5.1 position：决定元素脱不脱离普通布局

最核心的定位类型有：

  • static
  • relative
  • absolute
  • fixed
  • sticky

相关笔记：

你可以先粗略这样记：

  • static：默认状态，跟着文档流走。
  • relative：位置还能保留，只是“在原地轻微偏移”。
  • absolute：脱离普通文档流，去找自己的包含块。
  • fixed：通常相对视口固定。
  • sticky：在 relative 和 fixed 之间按滚动条件切换。

这里一定要建立一个认识：

Warning

absolute 和 fixed 的“参考对象”不是背语法就够了。 你必须同时理解 包含块，否则定位问题会一直觉得玄学。

5.2 z-index：为什么我调了数字还是没用

z-index 不是简单的“数字越大越在上面”。

它真正的前提是：

  1. 元素先进入了可以比较层级的环境。
  2. 你比较的是同一个堆叠上下文里的元素。

相关笔记：

很多“z-index 失效”都不是失效，而是以下原因之一：

  1. 元素根本没进入正确的定位 / 层叠环境。
  2. 它和你想比较的对象不在同一个堆叠上下文。
  3. 某个祖先因为 transform、opacity 等属性创建了新的上下文。

5.3 现代定位补充：锚点定位、Popover、Dialog

原笔记里已经提到了这些现代能力。

你可以先把它们放在“进阶 UI 能力”这一层来理解：

  • 锚点定位：让一个弹出层跟随某个锚点元素。
  • Popover：原生弹出层能力。
  • Dialog：原生对话框能力。

它们不是初学阶段的主线，但非常值得知道，因为这代表 CSS 和 Web 平台现在正在变得更“原生 UI 化”。

6. 表现：再回答“盒子长什么样”

这是很多人最早接触 CSS 的部分，但其实它应该放在前面几层之后来理解。

因为只有先知道“谁生效、盒子多大、盒子怎么排”，你加的颜色、边框、阴影才更可控。

6.1 颜色系统

原笔记里提到的颜色写法，核心是三组：

另外你也应该知道 RGB/HSL 都可以带透明度。

初学时建议这样理解：

  • hex：工程里常见、简洁。
  • rgb()：更偏底层、直接表达红绿蓝。
  • hsl()：更适合从“调色”的角度理解颜色。

6.2 尺寸单位

CSS 单位不要死背，而要按“参考系”去记。

可以先分成三类：

  1. 绝对单位：如 px。
  2. 相对字体单位：如 em、rem、ch。
  3. 视口单位：如 vw、vh、vmin、vmax。

相关延伸：

初学阶段最重要的判断是：

  • 要跟随根字号整体缩放，多用 rem。
  • 要跟随当前局部上下文缩放，考虑 em。
  • 要跟随屏幕大小变化，考虑视口单位。

6.3 逻辑属性

这是一个非常现代、非常值得尽早建立意识的知识点。

传统写法常常是：

  • left
  • right
  • top
  • bottom

但逻辑属性会让你从“物理方向”切换到“书写方向”去思考，比如：

  • inline-start
  • inline-end
  • block-start
  • block-end

如果你以后要面对多语言、国际化、不同书写模式的页面，这套思维非常重要。

6.4 边框、圆角、阴影、滤镜、混合模式

这块都是“视觉表现层”的能力。

可以按这样理解：

  • border：定义边界。
  • border-radius：让边界变圆。
  • box-shadow / text-shadow：制造层次感。
  • filter / backdrop-filter：对元素或背景做视觉处理。
  • blend modes：让图层之间发生混合。

如果你只是在建立知识体系，不用一开始就深挖所有滤镜参数，知道它们属于“绘制阶段的视觉处理”就够了。

6.5 文本与排版

文本是 CSS 里一个非常大的主题。

你可以先把它拆成四个问题：

  1. 字体是什么？
  2. 字多大？
  3. 行怎么排？
  4. 溢出和对齐怎么处理？

和这部分密切相关的知识包括：

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-decoration
  • white-space
  • word-break
  • text-overflow

相关延伸：

6.6 渐变

渐变 Gridiant 是“无需图片就能画视觉效果”的代表能力之一。

可以先记住三个家族：

  • 线性渐变
  • 径向渐变
  • 圆锥渐变

它本质上仍然属于“绘制盒子外观”的能力。

相关延伸：

7. 变化：再回答“它怎么动、怎么响应”

这是 CSS 最有“生命感”的部分。

7.1 transition：状态切换时的过渡

如果元素在两个状态之间变化，比如普通态和 hover 态，通常先想到 transition。

相关笔记：

它适合的场景是：

  • hover
  • focus
  • active
  • class 切换

7.2 animation：主动播放的一段关键帧动画

如果你不是简单地从 A 过渡到 B，而是想定义完整过程，就会用 @keyframes + animation。

相关笔记：

7.3 transform：为什么前端动画总喜欢它

这是实战里非常关键的一点。

很多动效优先用 transform，是因为它通常比直接改布局属性更高效。

相关延伸：

7.4 响应式：不同设备下如何变化

这部分的核心工具就是 媒体查询。

你可以把响应式设计先理解成：

同一份内容，在不同屏幕条件下，切换不同的布局和样式策略。

相关延伸：

这一层通常会和下面这些知识组合使用：

  • rem
  • 视口单位
  • Flex / Grid
  • 图片与文本的自适应

四、遇到 CSS 问题时的排查顺序

这部分非常重要。很多知识体系真正落地，不在“你知道多少”，而在“出问题时你怎么查”。

当某个样式不对时，建议按这个顺序排：

  1. 我选中元素了吗？ 先看 CSS 选择器、伪类选择器、伪元素选择器。
  2. 是不是被覆盖了？ 先看 级联、CSS选择器的权重、源顺序、!important。
  3. 这个属性本来会继承吗？ 先看 CSS中的继承。
  4. 这个元素现在是什么显示/布局模式？ 看 display，以及 display的各个属性值、Flex、Grid、文档流。
  5. 盒子尺寸是不是算错了？ 看 盒模型、box-sizing、overflow、margin、padding。
  6. 它是不是脱离普通流了？ 看 定位（position）、CSS中position属性、包含块。
  7. 是不是层叠关系出了问题？ 看 层叠等级、哪些css属性会创建新的层叠上下文。
  8. 是不是在某个屏幕尺寸下才出问题？ 看 媒体查询、单位、响应式布局。
  9. 是不是动画或性能导致视觉异常？ 看 transition关键字、animation关键字、如何减少回流以及重绘、回流和重绘。

Tip

以后遇到 CSS 问题，尽量不要直接“试属性碰运气”。 先判断这是“选择问题、级联问题、盒模型问题、布局问题、定位问题、层叠问题，还是响应式问题”。 一旦问题归类正确，排查速度会快很多。

五、建议的学习路径

如果你想把 CSS 学扎实，建议按下面顺序推进。

第一阶段：先把基础骨架立起来

  1. CSS 选择器
  2. 级联
  3. CSS中的继承
  4. 盒模型
  5. 标准盒模型
  6. 怪异盒模型
  7. display的各个属性值

这一阶段的目标不是做复杂页面，而是能看懂：

  • 为什么元素能被选中。
  • 为什么样式能或不能生效。
  • 为什么盒子大小和你想的不一样。

第二阶段：把布局学明白

  1. Nomal Flow
  2. float
  3. CSS当中的浮动
  4. 格式化上下文
  5. BFC
  6. IFC
  7. Flex
  8. Flex 布局教程：语法篇 - 阮一峰的网络日志
  9. CSS Grid 网格布局教程 - 阮一峰的网络日志

这一阶段的目标是：

  • 能完成常见页面布局。
  • 能解释“为什么会这样排”。
  • 能处理浮动、间距、居中、两栏三栏、栅格这些问题。

第三阶段：把定位和层叠学透

  1. 定位（position）
  2. CSS中position属性
  3. 包含块
  4. 层叠等级
  5. 哪些css属性会创建新的层叠上下文

这一阶段学完后，你对弹窗、吸顶、遮罩、悬浮层、fixed 失效、z-index 失效这类问题会清楚很多。

第四阶段：把视觉表现和响应式补齐

  1. hex
  2. hsl
  3. 渐变 Gridiant
  4. em与rem的区别
  5. 媒体查询
  6. 文本左右对齐
  7. CSS怎么实现单行、多行文本溢出隐藏

这一阶段学完后，你会更像“能把页面做完整的人”。

第五阶段：把动效和性能拉起来

  1. transition关键字
  2. animation关键字
  3. transition 与 animation属性的区别
  4. transition，transform，translate关键字在CSS中的区别
  5. 为什么有时候用translate来改变位置而不是定位
  6. 如何减少回流以及重绘
  7. 回流和重绘
  8. 回流(Reflow)
  9. 重绘(Repaint)

这一阶段的目标是：

  • 动效会做。
  • 动效做得更稳。
  • 不会轻易把页面做卡。

六、可以反复拿来复习的一句话框架

Summary

学 CSS，本质上就是学会回答六个问题：

  1. 我选中了谁？
  2. 多条规则里谁最终生效？
  3. 这个盒子多大？
  4. 这个盒子怎么排？
  5. 这个盒子怎么画？
  6. 这个盒子怎么变化？

如果你能把这六个问题和对应知识点稳定对应起来，CSS 就已经不是碎片知识，而是一张完整地图了。

相关笔记索引

基础概念

盒模型与尺寸

布局与定位

层叠与渲染

表现与动效

参考资料

反向链接