CSS 知识总结

浏览器渲染原理

步骤

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

transform 全解

四个常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate
• 倾斜 skew

注意：这些功能一般都需要配合 transition 过渡。inline 不支持 transform，需要先变成 block

translate

• translateX(<length-percentage>)
• translateY(<length-percentage>)
• translate(<length-percentage>, <length-percentage>?)
• translateZ(<length>) 且父容器 perspactive
• translate3d(X, Y, Z)

translate(-50%, -50%) 可做绝对定位元素的居中

scale

• scaleX(<number>)
• scaleY(<number>)
• scale(<number>, <number>?)

rotate

• rotate([<angle> | <zero>])
• rotateX([<angle> | <zero>])，以 X 轴旋转
• rotateY([<angle> | <zero>])，以 Y 轴旋转
• rotateZ([<angle> | <zero>])，以 Z 轴旋转
• rotate3d([<angle> | <zero>])

skew

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

多重效果

通过将以上属性组合使用，实现一些复杂效果

transition 过渡

作用

补充中间帧

语法

• 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

注意

并不是所有属性都能过渡

• display: none => block 没法过渡
• 一般改成 visibility: hidden => visible

过渡必须要有起始

比如 hover 和 非 hover 就是两次动画

如果有中间点，可以通过下列两种方法解决

1. 使用两次 transform

   .a === transform ===> .b

   .b === transform ===> .c

2. 使用 animation

   声明关键帧

   添加动画

animation

@keyframes 完整语法

• 一种写法是 from to

@keyframes xxx{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}
复制代码

• 另一种写法是百分数

@keyframes xxx{
    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}
复制代码

animation 缩写语法

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

• 时长：1s 或 1000ms
• 过渡方式：跟 transition 取值一样
• 次数：3 或者 2.4 或者 infinite
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwards | both
• 是否暂停：paused | running
• 以上所有属性都有对应的单独属性