css-web-dev
## 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`
## 参考资料
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://flukeout.github.io/
User agent stylesheets
- Selectors Explained https://kittygiraudel.github.io/selectors-explained/
- [The CSS Cascade](https://wattenberger.com/blog/css-cascade)
- [Cascade and inheritance - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)