产品经理一对一

180 8812 7777

云南省昆明市西山区云纺国际商厦C座20楼2002

首页 > 资讯 > 技术前研
CSS 知识点总结
编辑:竹鹿科技 2020-07-17 16:55

定位通过 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 动画优化

  • 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 部分,需要多练习代码,多看文档。

继续阅读与本文标签相同的文章