1. 浏览器渲染原理
- 根据HTML构建HTML树（DOM）；
- 根据CSS构建CSS树（CSSOM）；
- 将两棵树合并成一个渲染树；
- 布局（layout）：根据文档流和盒模型，计算元素的大小和位置；
- 绘制（painting）：将渲染树中的每个节点转换成屏幕上的实际像素；
- 合成（compose）：渲染的最后一步，作用是将不同的图层合在一起。这一步会有GPU的参与，比如canvas，video等元素是由GPU进行操作的。,
当样式更新时，CSS的渲染过程依次包括布局、绘制、合成。其中布局和绘制有可能被省略。
2. CSS 动画的两种做法（transition 和 animation）
第一种：transition 过渡
第二种：animation 动画 （推荐）
- transition 过渡
语法：
transition:属性名 时长（1s，1ms） 过渡方式（linear | ease | ease-in |ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps） 延迟（s， sm）、 - animation 动画
语法：
animation：动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停
@keyframes 动画名{0%{执行内容}30%{执行内容}65%{执行内容}100%{执行内容}}
3. flex布局
1.container部分
flex 布局是两根轴线 — 主轴和次轴。
主轴由 flex-direction 定义，可以取 4 个值：
row（从左向右横向排列）row-reverse（从右向左横向排列）column（从上向下纵向排列）column-reverse（从下向上横向排列）\
justify-content：控制items盒子在主轴上上的对齐方式
- flex-end
- center
- space-between
- space-around
- space-evenly
align-items：控制下级盒子在次轴上的位置（默认是stretch，）
- center（居中）
- flex-end（靠下）
- stretch（等高）
2.item部分
- item上面加order（通过order大小改变显示顺序）
- item上面加flex-grow（瓜分剩余空间）
- item上面加flex-shrink（控制空间不足时如何缩小）
