CSS知识总结

浏览器渲染原理

浏览器渲染大致有以下几个过程：

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
HTML树和CSS树组合成一个渲染树（render tree）
Layout布局 ,包括文档流、盒模型、大小、位置等
Paint绘制，包括边框颜色、文字颜色、阴影等
Composite合成，根据层叠关系展示画面

在更新样式的时候，浏览器是否完全按照以上六个步骤进行渲染呢？

并不一定
在更新样式的时候，还有可能省略掉layout，或者省略掉layout和paint。
那么如何查看是否省略掉其中的paint步骤？
我们可以在chrome浏览器中打开开发者工具 --> 按ESC --> 弹出的窗口，左边有三个小点，点击 --> 选择Rendering -> 勾选Paint flashing -> 接下来样式改变的时候，如果哪个地方变绿，就说明哪里被重新渲染了，没有变绿就没有被重新渲染

1.png

2.png

CSS动画的两种做法 transition 和 animation

transition过渡

transition 属性是 transition-property，transition-duration，transition-timing-function和 transition-delay 的一个简写属性。
transition-property：指定应用过渡属性的名称
transition-duration：以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画
transition-timing-function：动画速度的曲线，可以取的值有ease(默认)、linear、ease-in、ease-out、ease-in-out、以及贝塞尔曲线等
transition-delay：动画的延迟时间，即就是多长时间后开始动画
注意：使用transition的时候，要注意transition-duration和transition-delay的顺序，duration要放在delay前面。

animation动画

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式
animation-name：动画的名称，自定义就好
animation-duration：动画持续时间，跟transition类似
animation-timing-function：动画速度曲线，跟transition中类似
animation-delay：延迟事件
animation-iteration-count：动画的运行次数，无限次是infinite
animation-direction: 动画是否反向运动，常用的是alternate（动画交替运行）
animation-fill-mode：动画结束时的位置，forwards停到动画结束的位置
animation-play-state：定义一个动画是否运行或者暂停

animation通常和keyframes搭配使用

可以通过from to的形式

@keyframes name{
  from{
    动画开始的样式
  }
  to{
    动画结束的样式
  }
 }

也可以通过百分比的形式

@keyframes name{
  0%{
    动画开始的样式
  }
  50%｛
    动画中间的样式
  ｝
  100%{
    动画结束的样式
  }
 }