CSS 知识总结

LeahDizon
1,160 阅读5分钟

本篇文章我们来对 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 部分，需要多练习代码，多看文档。

avatar
文章
阅读
粉丝