CSS知识小结

浏览器渲染原理

渲染过程

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树
3. 将两棵树合并成一颗渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影画出来）
6. Compose合成（根据层叠关系展示画面）

一般用JS更新样式，更新样式时根据更新的属性有三种不同的渲染方式

1.JS/CSS->Style->Layout->Paint->Composite
2.JS/CSS->Style->Paint->Composite
3.JS/CSS->Style->Composite

显然这三种方式随着步骤的减少，能更好地优化性能；可以通过这个网站查询每个属性触发什么流程；例如盒子位移可以用定位的left或translate更新，用left会全都走一遍，但用translate只会进行合成，所以translate比left性能更好。

CSS动画

两种方式

一.transition 过渡

1. 作用：补充中间帧
2. 语法：

transition:属性名（或none或all）时长 过渡方式 延迟
用逗号分割两个属性
过渡方式具体记得有linear（线性）与非线性（ease等）
eg. transition:width 1.5s,height 1.5s;

具体详细可以看MDN
注意：不是所有属性都能过渡，例如display：none->block就不能过渡

二.animation

1.定义关键帧@keyframes

1.
@keyframes name{
    from{
    scale(1.0)
        }
    to{
    scale(1.5)
    }
}
2.
@keyframes name{
    0%{
    scale(1.0)
        }
    50%{
    scale(1.2)
    }
    100%{
    scale(1.5)
    }
}

2.animation
anmation:动画名|时长|延迟|次数|方向|填充方式|是否暂停

    时长：s|ms    
    过渡方式：与transition一样，例如linear和ease等    
    次数：1|2|3|infinite    
    方向：reverse|alternate|alternate-reverse    
    填充模式：none|forwards|backwards|both    
    是否暂停：paused|running    
    以上属性都有对应的单独属性（可以用js让按钮控制动画暂停和继续）