CSS 知识总结

百川108
94 阅读3分钟

1.浏览器渲染原理

浏览器的渲染过程可以简单分为以下六步：

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

知道了浏览器渲染的过程原理之后，还需要了解如何更新样式，总共有如下三种方式：

  • JS/CSS > 样式 > 布局 > 绘制 > 合成（div.remove()会触发当前消失，其他元素relayout

）

  • JS/CSS > 样式 > 绘制 > 合成（改变背景颜色，直接repaint + composite）
  • JS/CSS > 样式 > 合成（改变transform,只需composite）

2. CSS 动画的几种做法

（1）transform

  • translate(translateX,translateY) 沿X轴和Y轴上位移

    • translateX：沿X轴上位移，填正数往右位移；填负数，往左位移
    • translateY：沿Y轴上位移，填正数往下位移；填负数，往上位移
    • translateZ：沿Z轴上位移；电脑屏幕离你越近，那么translateZ() 里面的值越大；电脑屏幕离你越远，translateZ() 的值就越小
    • translate3d(translateX,translateY,translateZ):三维空间移动，用的较少
    • translate（-50%，-50%）可做绝对定位元素的居中

  • scale(scaleX,scaleY) 沿X轴和Y轴上缩放

    • scaleX:沿X轴上缩放，>1 放大， <1 缩小  默认值是 1；
    • scaleY:沿Y轴上缩放，同上
    • scale（x，y）:整体缩放
    • scale使用较少，因为容易出现模糊

  • rotate(rotateX,rotateY) 沿X轴和Y轴上旋转

    • rotateX:沿X轴上旋转
    • rotateY:沿Y轴上旋转
    • rotateZ:沿Z轴上旋转
    • rotate一般用于360度旋转制作loading

  • skew(skewX,skewY) 沿X轴和Y轴上倾斜

    • skewX:沿X轴上倾斜
    • skewY:沿Y轴上倾斜
    • skewZ:沿Z轴上倾斜
    • skew使用较少

    （2）transition

    transition的意思就是过渡，可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 [:hover]，[:active]或者通过 JavaScript 实现的状态变化。

    transition的语法：

  • transition:属性名 时长 过渡 方式 延迟

  • transition: left 200ms linear

  • 可以用逗号分隔两个不同属性

  • transition: left 200ms, top 400ms

  • 可以用all代表所有属性

  • transition: all 200ms

  • 过渡方式有: linear | ease | ease-in |ease-out | ease-in-out | cubic-bezier | step-start | step-end steps。 同时需要注意，并不是所有的属性都可以过渡，比如从display:none到display:block就无法实现过渡效果，而像background、opacity等则可以过渡。

（3）animation

作用：关键帧动画,可以处理多次动画

animation的缩写语法:

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

  • 时长：1s或者1000ms

  • 过渡方式：跟transition取值一样，如linear

  • 次数：3或者2.4或者infinite

  • 方向：reverse|alternate|alternate-reverse

  • 填充模式：none|forwards|backwards|both

  • 是否暂停：paused|running

  • 以上所有属性都有对应的单独属性

avatar
文章
阅读
粉丝