总览
基础知识
布局和定位
层叠上下文
层叠上下文是对HTML的三维构想，将元素沿着垂直屏幕的虚构z轴排开
变形，过渡，动画
transform变形
- 2D
- 3D
transition过渡
animation动画
响应式设计
原则
优先选用流式分布
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单，统一的视口
使用相对长度，em，rem，vm做长度度量
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效可将其媒体类型（如screen，print）及媒体特性（如视口宽度，设备方向：横向或纵向）作为约束条件
设备像素，参考像素，移动设备视口
设备像素（物理像素）：显示器上绘制的最小单位，通过屏幕控制每个像素点的颜色，使屏幕显示出不同的图像。
设备像素比：未缩放状态下，设备像素和CSS像素的初始比例关系
布局视口（viewport）；页面HTML元素的包含块
相对长度的使用
em
rem
vm和vh
CSS生态
语言增强
CSS预处理器
提高研发效率：
- 自定义变量——提高可复用
- 嵌套，作用域——避免全局污染，结构层次清晰，减少复杂组合选择器
- mixins，继承——提高可复用，可维护性
- 操作符、条件/循环语句、自定义函数——提高可编程能力，增加灵活性
scss、less，stylus对比
CSS后处理器
postcss机制
工程架构
CSS模块化
CSS in JS
将应用的CSS样式写在JavaScript中，利用js动态生成CSS
原子化CSS
原子化CSS是一种CSS的架构方式，它倾向于小巧且用途单一的class，并以视觉效果进行命名
- 实用工具库优先
- 按需生成
- 支持配置样式规则和自定义插件
