CSS知识总结

本章对CSS知识做一个总结，主要针对一下几个方面，首先是浏览器的渲染原理，其次便是CSS动画的两种做法以及CSS定位。

浏览器的渲染原理

步骤

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

三种不同的渲染方式

第一种，例如div.remove()，会触发当前消失，其他元素relayout
第二种，例如：改变颜色，直接 repaint + composite
第三种，例如：改变改变 transform ，只需 composite

如果每种都尝试渲染再得出结果的话，太过于繁琐，于是便有程序员将所有属性的渲染结果测试出来了------>CSS Triggers

CSS动画

动画的定义

动画是由许多精致的画面(帧)以一定的速度连续播放时，肉眼因视觉惨象产生错觉，而误以为是活动的画面。

动画的概念

帧：每个静止的画面都叫帧
播放速度：每秒 24 帧或者每秒 30 帧

CSS动画优化方案

JS 优化。使用 requestAnimationFrame 代替 setTimeout 或 setInterval
CSS 优化。使用 will-chage 或 translate

transform全解

四个常用属性

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

温馨提醒：这些属性一般都是配合transtion进行过渡，否则动画十分生硬，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 就是两次动画

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

使用两次 transform----->先将a变b，再将b变c
使用 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
以上所有属性都有对应的单独属性

position 定位

属性

static 默认值，待在文档流里
relative 相对定位，升起来，但不脱离文档流
absolute 绝对定位，定位基准是祖先元素里的非 static，最近的定位元素
fixed 固定定位，定位基准是 viewport 视口
sticky 粘滞定位，在移动端存在太多bug，不做过多介绍

relative 相对定位

使用场景如下：

用于做位移(不常用)
用于给 absolute 元素做定位基准

配合 z-index 使用

z-index: auto 默认值，不创建新层叠上下文
z-index: 0/1/2
z-index: -1/-2 默认每一个z-index为auto，auto计算出来的值是0

absolute 绝对定位

使用场景如下：

脱离原来的位置，另起一层。比如对话框的关闭按钮、鼠标提示等

配合 z-index 使用

注意：某些浏览器不写 top / left 会位置错乱

善用 left: 100%
善用 left: 50%; 加负 margin

fixed 固定定位

使用场景如下：

广告
回到顶部按钮

配合 z-index 使用

只要元素定位了，自动跑到所有东西最上层。默认z-index=0
所有定位元素会以文字为基准，第一层为0，以此类推
如果是-1，比背景还要低，可以无限往后，但是不能超过默认的层叠上下文

层叠上下文

上面定位提到了层叠上下文，那么什么是层叠上下文呢？层叠上下文也叫堆叠上下文。

比喻：每一个层叠上下文就是一个新的小世界(作用域)，这个小世界里的 z-index 跟外界无关，处在同一个小世界的 z-index 才能比较

那么哪些不正交属性可以创建它？以下这些是比较常用的属性

z-index / flex / opacity / transform