重点内容：
- 基础
- 布局和定位
- 层叠上下文
- 变形、过渡、动画
- 响应式设计
- CSS 生态相关
详细知识点介绍：
层叠优先级：
层叠三大规则(优先程度递减)：
1. 样式表来源
2. 选择器优先级：
- 内联样式不属于选择器
- :is() :not() :has() 本身不计入优先级，以参数中最高的优先级为准，:where() 优先级为0
3. 源码位置
- 对于 @import 的样式，根据 @import 的顺序
- 对于 link 和 style 标签的样式，根据在 document 中的顺序决定
层叠概念 引申出的 good practice：
- 选择器尽量少用 id
- 尽量不要用 ！important
- 自己的样式要加载在引用库样式的后面
继承：
- 大部分具有继承特性的属性跟文本相关
- 可以使用 inherit 关键字显式指定一个属性值从其父元素继承
盒模型：
浏览器根据视觉格式化模型，将所有元素表示为盒子模型，css 通过盒模型做 layout
布局：
Normal Flow常规流：
默认的布局方式：块级格式化上下文和内联格式化上下文
Float 浮动流：
用 float 属性控制脱流，做横向布局
Positioning 定位流：
用 Position 属性控制，fixed 和 aboulute 脱离文档流可以自由定位、覆盖
- relative：元素相对于自己原来在文档流中的位置进行定位，但原来文档流的空间还在
- absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非 static 定位祖先元素的进行定位
- fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置
- sticky：元素相对于它的最近滚动祖先的视口进行定位
Flex 弹性盒子布局：
为了提供更高效、灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向的调整更为灵活
Grid 网格布局：
2017年推出，可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列
Flex 弹性盒子布局 与 Grid 网格布局 对比：
Flex：
- 一维布局
- 基于内容
- 浏览器兼容性更好
Grid：
- 二维布局
- 基于布局
- 2017年后的浏览器版本普遍支持
大面积或整体布局，推荐使用 Grid，小面积 或 组件中，或 Grid item 中可以使用 Flex 做灵活布局
层叠上下文：
层叠上下文是对 HTML 元素的三维构想，将元素沿着垂直屏幕的虚构的 Z 轴排开，层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序
- z-index 只在同一个层叠上下文内比较
- 子元素的 z-index 无法超越父元素的 z-index 显示顺序
transform 变形：
2D 相关属性：
- transform：translate(移动)、rotate(旋转)、scale(缩放)等
- transform-origin：right top、center等，表示变形时依据的原点
3D 相关属性
- transform：translate3d、rotate3d、scale3d等
- transform-origin：right top、50px、30px等，表示变形时依据的原点
- transform-style: flat 或 preserve-3d 看子元素的3d表现
- perspective：观看点距离 z=0 这个平面的距离
- perspective-origin：观看者的位置
- backface-visibility：元素正面只有朝向观察者的时候可见
animation 动画：
- @keyframes 关键帧 用来定义动画过程中出现的关键字样
- animation 相关属性 用来为元素添加动画
如何让动画性能更好
- 尽量不用触发 reflow 的属性
- 遇到性能问题时可以触发硬件加速
- 尽量使用 transform 和 opacity 去写动画
响应式设计：
遵循原则：
- 优先选用流式布局，如百分比、flex等
- 使用响应式图片，匹配尺寸，节省宽带
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，em、rem、vw 作为长度度量
使用媒体查询的 tips：
- 媒体查询遵循 cascading 层叠覆盖原则，min- 和 max- 选择一个
- 由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
- 由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
CSS 预处理器：
如何提高研发效率：
- 自定义变量： 提高可复用
- 嵌套、作用域： 避免全局污染、结构层次清晰、减少复杂组合选择器
- mixins、继承：提高可复用、可维护性
- 操作符、条件/循环语句、自定义函数： 提高可编程能力、增加灵活性
CSS 模块化：
CSS Modole 是为解决全局污染而出现的方案，解决CSS全局污染、本质上是保证样式集合对应的选择器是唯一的。
从这个角度看，主流的单纯针对于防止全局污染的方案大概有：
- BEM 命名规范
- vue-loader 的 scoped 方案
- CSS Modules
