css 缩放_CSS知识总结

1.浏览器渲染原理

步骤：

1.根据HTML构建HTML树（DOM）

2.根据CSS构建CSS树（CSSOM）

3.将两棵树合并成一棵渲染树（render tree）

4.Layout布局（文档流，盒模型，计算大小和位置）

5.Paint绘制（把边框颜色，文字颜色，阴影等画出来）

6.Composite合成（根据层叠关系，展示画面）

2.如何更新样式

1.一般用JS更新样式

注：加样式不如加类，一个类可以有很多样式

3.三种更新方式

1.JS/CSS > 样式 > 布局 > 绘制 >合成

例如，div.remove()会触发当前消失，其他元素relayout

2.JS/CSS > 样式 > 绘制 >合成

跳过Layout，

例如，改变背景颜色，直接repaint+composite

3.JS/CSS > 样式 > 合成

跳过Layout和paint

例如，改变transform，只需composite

4.如何知道各属性触发流程

google搜索http://CSStriggers.com

经验：高手不用left做动画，用transform。

原因在于，left需要把渲染过程完整走一遍。

但是，transform并没有repaint,所以性能优于left。

5.transform

四个常用功能

1.位移translate

水平方向

经验：

1.学会看MDN的语法示例

2.translate(-50%,-50%)可以做绝对定位元素的居中

left

2.缩放scale

同translate也有X,Y轴，用的比较少，容易模糊

3.旋转rotate

经验：

1.一般用于只做Loading

2.用到搜索MDN rotate看文档

4.倾斜skew

用的比较少，可以搜MDN skew

经验：

1.一般都需要配合transition过渡

2.inline元素不支持transform，需要先变成block

---

Transition 过渡

作用：补充中间帧

基本用法

1.语法：

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

transition

2.变态:并不是所有属性都能过渡

1.display:none=>block没法过渡，不要使用这个过渡

2.改成visibility:hidden=>visible(记就行了，CSS没有为什么)

3.background可以过渡

4.opacity可以过渡，但是不推荐

---

Animation 动画

#

CSS就是靠动手实验寻找答案 ，自己动手！！

语法：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名;

以上属性都有单独的属性，参照MDN

时长：1s = 1000ms

过渡方式:跟transiton取值一样

次数：3或者2.4或者infinite（无限次）

方向：reverse（反方向）| alternate（交替,适合做载入动画）

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

是否暂停：paused | running

---

CSS动画优化

1.JS优化

用requestAnimationFrame代替setTimeout或setInterval

2.CSS优化

使用will-change或translate

使用transform代替left