一.浏览器渲染原理

大体上分为六个步骤：

1. 浏览器拿到HTML，构建HTML树
2. 根据CSS构建CSS树
3. 将两棵树合并，成渲染树(用户最终会看到的)
4. 布局layout
5. 绘制paint
6. 合成compose

二.CSS动画的两种做法

1.transition 过渡

用法：给出开始和结尾，浏览器自动补充中间帧，形成动画。

transition:width 1s linear;

注意：并不是所有属性都能过渡。如：

display:block;
display:none;

可以使用

visibility:visible;
visibilitiy:hidden;

2.animation 动画

如果除了开始和结束状态，动画还需要有中间点，这时用animation更好一些。方法是，首先使用@keyframes声明关键帧，然后把这个名字放在animation里。

@keyframes xxx{
    0%{
        transform:none;
    }
    40%{
        transform:translateX(100px);
    }
    100%{
        transform:translateX(100px) translateY(200px);
    }
}

关键帧里使用百分数表示动画里触发关键帧的时间点。0%表示开始，100%表示结束，中间可以任意添加关键帧。xxx是关键帧的名字。

animation:xxx 1s;

animation的常用属性：

• 时长：表示动画的总时间。单位可以是s,ms
• 过渡方式：默认是先快后慢。linear表示线性，匀速变化。
• 次数：表示动画的次数，infinite表示无限次。
• 方向：reverse:反方向（100%-0%）；alternate:原方向，再原路返回。
• 动画名：如例子中的xxx。

这些属性可以在一行里缩写。

除了这些，还学习了CSS的三种布局，float布局，flex布局，grid布局。CSS定位，是在垂直于屏幕的方向上，不同元素的排布。我觉得层叠上下文有点不好理解。还有几个重要的概念，文档流，盒模型，和CSS定位中position的用法，相对定位和绝对定位，z-index的使用。