CSS 知识总结

浏览器渲染原理

步骤

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

三种更新方式

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

一. TRANSITION过渡

1. 作用：补充中间帧

2. 语法：

• transition：属性名 | 时长 | 过渡方式 | 延迟
• 可以用all代表所有属性
• 过渡方式：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
• 不是所有属性都能过渡, display: none =>/<= block没办法过渡。一般改成 visibility: hidden =>/<= visible。但是background背景和opacity透明度能过渡。

二. ANIMATION

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

• 时长：1s / 1000ms
• 过渡方式：跟transition取值相同
• 次数：3 / 2.4 / infinite
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwards | both
• 是否暂停： paused | running

2. keyframes关键帧两种写法：

@keyframes slidein {
    from {
        transform:translateX(0%);
    }
    
    to {
        transform:transateX(100%);
    }
}

@keyframes identifier {
    0% { top: 0; left: 0; }
    30% { top: 50px; }
    68%, 72% { left: 50px; }
    100% { top: 100px; left: 100px; }
}

感想

要学会多查阅MDN官方文档，多写几个例子，在例子中学会各个属性的用法和特性。