CSS知识总结

游览器渲染原理

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

其中4和5在特殊情况下可省略

transform

四个常用功能

• translate（位移）
• scalex （扩大）
• rotate (旋转)
• skew （倾斜）

ansition 过渡

作用

补充中间帧

• transition: 属性名 时长 过渡方式 延迟
• transition: left 200ms linear
• transition: left 200ms, top 400ms 可以用逗号分隔两个不同的属性
• transition: all 200ms 可以用 all 代表所有属性
• 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

animation

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

    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}

    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}