CSS 知识总结

本篇文章咱们来对 CSS 知识作一个总结。以前已经对 CSS 基础概念 和 CSS 布局 进行了整理，能够点击跳转查看。接下来，我主要对 CSS 定位、浏览器渲染原理以及 CSS 动画，三部分进行介绍。

CSS 定位

以前已经介绍了布局，那么布局和定位的区别是什么呢？

• 布局是在屏幕平面上的
• 定位是在垂直于屏幕的

定位经过 position 属性进行建立，一共分为五个值

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

position: relative

使用场景以下：

1. 用于作位移(不经常使用)
2. 用于给 absolute 元素作定位基准

配合 z-index 使用

• z-index: auto 默认值，不建立新层叠上下文
• z-index: 0/1/2
• z-index: -1/-2

默认每个 z-index 为 auto ，auto 计算出来的值是 0 。

position: absolute

使用场景以下：

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

配合 z-index 使用

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

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

postion: fixed

使用场景以下：

1. 广告
2. 回到顶部按钮

配合 z-index 使用

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

层叠上下文

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

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

那么哪些不正交属性能够建立它？如下这些是比较经常使用的属性

z-index / flex / opacity / transform
复制代码

CSS 动画

下面咱们来看下 CSS 动画。

动画定义

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

概念

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

浏览器渲染原理

步骤

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

三种不一样的渲染方式

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

这里推荐 CSS Triggers 这个网站，能够查看每一个属性出发哪种流程。

CSS 动画优化

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

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
• 以上全部属性都有对应的单独属性

CSS 部分的知识整理差很少就先告一段落了，关于 CSS 部分，须要多练习代码，多看文档。