CSS 小结

有一段时间没写博客了，项目高峰期已过，该学习一波了

小结一下 CSS

1. 浏览器渲染原理

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

三种更新方式：

例如用 transform: translateX 替代 left，性能上不会产生 repaint，要更好。

2. 盒模型 (box-sizing)

(1) content-box

width = content （兼容低版本 ie 可以用 content-box 避免出现 scroll 时宽度变化）

(2) border-box

width = content + padding + border （通常使用的）

3. 一个 div 的分层

从上往下（屏幕外向里）依次是：

1. 内联子元素（文字内容）
2. 浮动元素
3. 块级子元素
4. border
5. background

4. CSS 动画的两种做法（transition 和 animation）

(1) transition

常用 transform：

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

1. 一般都需要配合 transition

2. inline 元素不支持 transform，需先变成 block

transition 即过渡，起补充中间帧的作用

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

none –> block 一般改为 hidden –> visible

(2) animation

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

具体功能有什么可单独搜索 MDN 或其他网站对应内容

(3) @keyframe

@keyframe 属性名 {
  from {
  }
  to {
  }
}

/* or */

@keyframe 属性名 {
  0% {
  }
  50% {
  }
  100% {
  }
}

参考来自：饥人谷、渲染树构建、布局及绘制、渲染性能、坚持仅合成器的属性和管理层计数