CSS 知识总结

1.浏览器渲染原理

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

更详细的参考谷歌的文章。

2.CSS 动画

2.1 先介绍transform

CSStransform属性允许你旋转(rotate)，缩放(scale)，倾斜(skew)或平移(translate)给定元素。通过这个可以实现一些简单动画。下面介绍一些常用写法。

2.1.1 transform之translate

常用写法

translateX( <length-percentage> )
translateY( <length-percentage> )
1
translate( <length-percentage>，<length-
percentage>? )
V
translateZ( <length> )且父容器perspective 
translate3d(x, y, z)

经验

• 要学会看懂MDN的语法示例
• translate(-50%, 50%)可做绝对定位元素的居中

2.1.2 transform之scale

常用写法

scaleX( <number> )
scaleY( <number> )
scale( <number>，<number>? )

经验

• 用得较少，因为容易出现模糊

2.1.3 transform之rotate

常用写法

rotate( [ <angle> | <zero> ])
rotateZ( [ <angle> | <zero> ])
rotateX([ <angle>| <zero> ] )
rotateY( [ <angle>| <zero> ] )

经验

• 一般用于 360度旋转制作loading 用到时再搜索rotate MDN看文档

2.1.4 transform之skew

常用写法

skewX( [ <angle> | <zero> ])
skewY( [ <angle> | <zero> ])
skew( [<angle> | <zero> ],[ <angle> | <zero> ]?)

经验

• 用得较少，用到时再搜skew MDN文档

2.2 transition

transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。简而言之，可以插中间帧。

语法

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

注意，并不是所有属性都能过渡。display: none => block没法过渡。

如果要做复杂动画(多个中间点状态)，就需要用上animation。

2.3 animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。 如何使用？主要分为两步，声明关键帧，添加动画。

2.3.1 @keyframes添加关键帧

有两种方式，from-to和百分数，分别如下：

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

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

详细参考MDN。

2.3.2 缩写语法

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

• 时长: 1s或者1000ms
• 过渡方式:跟transition取值一样，如linear
• 次数: 3或者2.4或者infinite
• 方向: reverse | alternate | alternate-reverse
• 填充模式: none | forwards| backwards| both
• 是否暂停: paused | running

以上所有属性都有对应的单独属性。