CSS 知识总结文档对象模型(DOM)是HTML和XML文档的编程接口，它会将web页面和脚本或程序语言连接起来。 CS

根据HTML构建HTML树（DOM）
- 文档对象模型(DOM)是HTML和XML文档的编程接口，它会将web页面和脚本或程序语言连接起来。
根据CSS构建CSS树（CSSOM）
- CSS 对象模型 (CSS Object Model, CSSOM) 是一个存放所有 CSS 选择器与相关特性的树状结构容器，拥有根节点、邻居节点、后代节点、子代节点以及其他关系。 CSSCOM 非常类似于 DOM 文件对象模型。
将两棵树合并成一颗渲染树（render tree）
Layout布局（文档流，盒模型，计算大小和位置）
Paint绘制（将边框颜色，文字颜色，阴影等画出来）
Compose合成（根据层叠关系展示画面）

一般用JS更新样式：

Notes：

transsform:rotate(45deg)；顺时针旋转45度。一般用于 360 度旋转制作 loading，或者按钮的交互（鼠标移到按钮上就转一圈），多看MDN文档。

transsform:skewX(15deg)；X轴倾斜15度。用得较少，用时搜 MDN 文档。

作用：补全中间帧。

例如：
效果
语法：
- transition：属性名时长过渡时间延迟；
  
  transition：right 10s linear；
- 可用逗号分隔开两个不同属性
  
  transition：right 10s,top 10s；
- 可用all代表所有属性
  
  transition：all 10s linear；
- 过渡方式：linear，ease，ease-in，ease-out， ease-in-out，cubic-bezier，step- start，step-end，steps。具体效果查看MDN
Notes：并非所有属性都使用transition。
- display:block;=>display:none;不能过渡，而修改成透明度opacity，也只是看不见了，位置还一直占着。一般改成 visibility:visible=>hidden，visibility也是占位置的。
- background背景颜色可以过渡。
- opacity透明度可以过渡，但不推荐。

过渡必须有起始，一般只有一次或两次动画，比如hover和非hover状态的过渡。

若有中间过渡，可以使用两次transform，用setTimeout或者监听transitionend事件确认中间点。

也可以使用animation（声明关键帧，添加动画）来实现。

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

或者百分数

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}