阅读 40

CSS知识总结

一、浏览器渲染原理概述

1,浏览器的渲染过程

步骤1-根据HTML构建HTML树(DOM)

image.png

步骤2-根据CSS构建CSS树(CSSOM)

image.png

步骤3-将两棵树合并成一颗渲染树(render tree)

image.png

二、如何更新样式

  • 一般我们用js来更新样式
div.style. background:'red' ;
div.style.display='none'
div.classList.add('red')
div.remove()直接删除节点
复制代码
  • 三种更新方式有什么不同

image.png

三、CSS动画的两种做法(transition 和 animation)

transition

4个常用功能

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

经验 一般都需要配合transition过渡 inline元素不支持transform,需要先变成block

translate 位移

  • translateX 在2D平面中水平方向上重新定位元素
  • translateY 在2D平面中垂直方向上重新定位元素
  • translateZ 沿着z轴在三维空间中重新定位元素
  • translate3d 在三维空间中重新定位一个元素

scale 缩放

-   scaleX(number)
-   scaleY(number)
-   scaleZ(number,number?)
复制代码

使用较少,因为出现模糊

rotate 旋转

-   rotate([<angle>|<zero>])
-   rotateZ([<angle>|<zero>])
-   rotateX([<angle>|<zero>])
-   rotateY([<angle>|<zero>])
-   rotate3d复杂
复制代码

skew 倾斜

-   skewX([<angle>|<zero>])
-   skewY([<angle>|<zero>])
-   skew([<angle>|<zero>],[<angle>|<zero>]?)
复制代码

transition 过渡

  • 作用于补充中间帧

语法

  • transiton:属性名 时长 过渡方式 延迟
  • transition:left 200ms linear
  • 可以用逗号分隔两个不同属性
  • transiton:left 200ms, top 400ms
  • 可以用all代表所有属性
  • transition:all 200ms
  • 过渡方式:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps

animation

@keyframes完整语法 两种写法

image.png

image.png

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

  • 时长:1s或者1000ms

  • 过渡方式:跟transition取值一样,如linear

  • 方向:reverse|alternate|alternate-reverse

  • 填充模式:forwards|backwards|both

  • 是否暂停:paused|running

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

文章分类
前端
文章标签