CSS 知识总结

浏览器渲染原理

浏览器拿到html和css后做了什么

1. 根据 html 构建 html 树，这种树叫做（DOM）
2. 根据 css 构建 css 树，这种树叫（CSSOM）
3. 将两棵树合并成一颗渲染树（rander tree），渲染树就是用户所看到的内容，或者说页面
4. 浏览器会根据渲染树进行 Layout布局（文档流、盒模型、计算大小和位置）
5. paint 绘制，也就是填色（把边框颜色、文字颜色、阴影、背景等等添加颜色）
6. composite 合成（根据层叠关系展示画面）

它们的三种更新方式

1. JS > CSS > 样式 > 布局 > 绘制 > 合成
2. JS > CSS > 样式 > 布局 > 合成
3. JS > CSS > 样式 > 合成

第一种，全部都走一遍，包括布局、绘制、合成。例如：div.remove()

第二种，没有改变Layout（布局），所以布局这一步骤跳过，直接绘制并合成。例如：只修改了背景。

第三种，没有改布局以及绘制，直接合成。

CSS动画的做法

一、transition

作用就是补充中间帧。

通过属性或者transform设置开头跟结尾，由transition补充中间帧。

过渡方式：linear | ease | ease-in | ease-out | cubic-bezier | step-start | step-end | steps

语法：

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

.demo{
  height: 100px;
  width:100px;
  border:1px solid red;
  transition: width 1s ease 0s;
}
.demo:hover {
  width: 100px
}

注意：不是所有的属性都能过渡。

如display: none; => block 是没有过渡的，它会直接消失，可以将它改成visibility: hidden =>visible

background 可以过渡。

cpacity 可以过渡，但是不推荐使用。

二、animation 属性

给transform添加关键帧。

语法：

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

• 时长：1s 或者1000ms
• 过渡方式：跟transition取值一样，如linear、ease
• 次数：3 或者 2.4 或者 infinite（循环）
• 方向：reverse（方向）、alternate（原路返回）、alternate-reverse（从反向开始并原路返回）
• 填充模式：none，forwards，backwards，both
• 是否暂停：paused，running

以上所有属性都有对应的单独属性写法。

注意：动画名写在哪个位置都可以，浏览器自动进行就匹配。

@keyframes 的完整语法

第一种：from + to

@keyframes xxx {
  from{
    transform: none;
  }
  to{
    transform: translateX(100px);
  }
}

第二种：使用百分数划分

@keyframes xxx {
  0%{
    transform: none;
  }
  50%{
    transform: translateX(100px);
  }
  100%{
    transform: translateX(100px) translateY(100px);
  }
}