CSS 知识总结

浏览器渲染原理

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

CSS 动画的两种做法

一、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 。而且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语法示例。