CSS知识总结

浏览器渲染原理

步骤：

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

CSS 动画的两种做法（transition 和 animation）

具体相关属性可以搜索MDN查看

transform常用功能：位移（translate），缩放（scale），旋转（rotate），倾斜（skew）

transition可以仅通过CSS来实现简单的动画效果，同时它是一个简写属性，由transition-property、transition-duration、transition-timing-function和transition-delay复合而成。

animation用在做多帧动画，可以精准控制动画的绘制，自定义一动画。例如：

className {
    /*
    依次是：
    动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
    注意: 只有动画名字, 动画持续时长和动画内容是必须有的
    */
    animation: animation-name animation-duration (animation-timing-function) 
            (animation-delay) (animation-iteration-time) (animation-derection) (animation-fill-mode);
 }
    
@keyframes xxx{
    from{
        propertyName: propertyValue;
    }
    to{
        propertyName: propertyValue;
    }
 }