Box Model 盒子模型
盒子模型是 CSS 的核心。
内容和大小
display 的值不同，盒子的状态不同。盒子中有更多内容，比如更多盒子。这些盒子由子元素或纯文本生成。即使没有子元素，内容本身就会改变盒子的大小。
自定义盒子大小 extrinsic sizing vs 使用浏览器默认大小 intrinsic sizing
当内容太多，以至于盒子无法放下时，就会出现溢出。要处理这种情况就要用到 overflow 属性。
盒子模型是如何划分区域的
box-sizing: border-box;
Selectors 选择器
- 通用选择器（通配符）
- 属性选择器
- 伪类，伪元素（它们的区别：后者通过
::使用） - Combinators
- Descendant combinator
- Next sibling combinator
- Subsequent- sibling combinator
- Child combinator
- Compound selectors
如果 class 中含有不止目标 class 的其他类，在进行 CSS 设置时也会匹配。因为 CSS 查找 class 属性是否被包含，而不是恰好符合目标 class。
The cascade 层叠
当同一个元素被多种 CSS 规则修改时，哪些规则的优先级更高？用于解决这一问题的算法就是 cascade。
层叠算法的四个阶段：
- Position and order of appearance
- Specificity
- Origin
- Importance
位置
If you have a <link> that includes CSS at the top of your HTML page, then another <link> that includes CSS at the bottom of your page: the bottom <link> will have the most specificity.
特指/专一性
优先级：id > 类 > 标签，因此一般情况下不建议通过 id 添加样式，它很难被覆盖掉。
CSS 来源
CSS 样式来自浏览器默认样式、浏览器扩展添加的样式、通过系统添加的样式和我编写的样式。从最不专一到最专一性排序：
- User agent base styles: browser default styles
- Local user styles: extension, OS
- Authored CSS: 我写的 CSS
- 添加了
!important的 CSS - Local user styles
!important - User agent
!important
重要性
CSS 属性的重要性优先级（从普通到最重要）：
- 正常规则
animation!important(following the same order as origin)transition