CSS知识总结

1.浏览器渲染原理

1.1浏览器的渲染过程

1. 根据HTML构建HTML树
2. 根据CSS构建CSS树
3. 将两棵树合并成一颗渲染树
4. Layout布局
5. Paint绘制
6. Compose合成

1.2三种更新的方式

• JS/CSS->样式->布局->绘制->合成      (全走)
• JS/CSS->样式-------->绘制->合成       (跳过layout)
• JS/CSS->样式--------------->合成       (跳过layout和paint)

2.CSS动画的两种做法

2.1transform

常用功能

• 位移translate：

1. translateX
2. translateY
3. translate
4. translateZ

使用经验: translate(-50%,-50%)可做绝对定位元素居中

• 缩放scale

1. scaleX
2. scaleY
3. scale

• 旋转rotate

1. rotate
2. totateX
3. totateY
4. totateZ

使用经验: 一般用于360°旋转制作loading。

• 倾斜skew

1. skewX
2. skewY
3. skew

注意: 使用这些属性时一般都配合transition来达到过度效果。

除此之外，transform还可以做多重效果，使用空格隔开。

2.2 animation

基本语法: 

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；

时长：可以用s或者ms作为单位

过度方式：跟transition取值一样，可以填写：linear | ease | ease-in | ease-in-out，等

次数：重复的次数，可以infinite无限次

方向：reverse | alternate | alternate-reverse

填充模式：none | forwards | backwards | both

是否暂停: paused | running

以上的所有属性都有对应的单独属性

@keyframes的两种语法

1. from to
2. 使用百分数写法

3.transition过渡

作用：用来补充中间帧

语法：

transition: 属性名  时长  过渡方式  延迟

注意：

• 并不是所有属性都能过渡
• display:none => block没法过渡 （可以改成 visibility: hidden =>visible）
• 过渡必须要有起始，或者是中间点（使用两次tranform或者是使用animation来实现）

4.总结

CSS涉及的属性非常多，遇到不记得或者是不确定的情况，要多查MDN文档，查文档的能力对程序员来说是至关重要的能力。