优先级
层叠三大规则（优先级递减）
-
样式表来源
重要程度递减：
- 用户代理样式表中的 !important
- 用户样式表中的 !important
- 作者样式表中的 !important
- 作者样式表（开发者提供样式）
- 用户样式表
- 用户代理样式（浏览器默认样式）
-
选择器优先级
内联 > id选择器 > 类选择器、伪类选择器、属性选择器 > 元素选择器、伪元素选择器
-
源码位置
Tips：
- 尽量少用id选择器
- 尽量不使用 ！important
- 自己的样式加载在引用库样式后面
继承
- 大部分与文本有关的属性具有继承特性，如：color font line-height text-align等
- inherit 关键字显式指定一个属性值从其父元素继承
层叠
层叠上下文（the stacking context）
- 对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开
- 一个新的层叠上下文渲染时会对应一个浏览器渲染时的render layer
形成新的层叠上下文的条件
| 属性/元素 | 值 |
|---|---|
| position | relative 或 absolute （并且z-index不是auto） |
| position | fixed 或 sticky |
| opacity | < 1 |
| transform | 不为none |
| will-change | 不为通用值 |
| flex或grid子元素 | z-index 不为 auto） |
同一层叠上下文内元素的顺序
Tips
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置为10或100，方便后续插入
盒模型
控制盒子类型：
- display：block inline inline-block flex 控制盒中内容流：
- overflow：auto scroll hidden 控制定位：
- position：static relative absolute fixed sticky 是否可见：
- visibility：visible hidden（和display：none 同样能够隐藏元素，但是visibility：hidden在文档流中仍然占位）
总结
CSS的知识点比较细碎，但1个小时的课程也是收获满满。之前一直比较忽视CSS的相关内容，学完课程后感到自己对于CSS仅仅是一知半解。今天先整理部分内容，明天继续整理剩余部分。
