CSS 知识总结-1

浏览器渲染原理

步骤

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

性能

• JS 修改样式的三种更新方式：

  • JS/CSS > Style > Layout > Paint > Composite
  • JS/CSS > Style > Paint > Composite
  • JS/CSS > Style > Composite

• 注意性能问题的方式：

  • 使用开发者工具的 Paint Flash 验证，绿色表示 repaint
  • CSS 渲染过程依次包括布局（Layout）、绘制（Paint）和合成（Composite）
  • 其中布局和绘制有可能被省略
  • 可查询 csstriggers.com

CSS 动画

transform（变形）

• 旋转 transform: rotate(20deg);
• 倾斜 transform: skew(150deg, -10deg);
• 位移 transform: translate(20px, 20px);
  • translateX()
  • translateY()
  • translate(X,Y)
  • translateZ()
  • translate3d(X,Y,Z)
• 缩放 transform: scale(.5);
  • scaleX()
  • scaleY()
  • scale()

transition（过渡）

• 作用：补充中间帧
• 语法：transition: 属性名 时长 过渡方式 延迟;
• 例：transition: all .3s ease-in .1s;
  • all：受过渡影响的属性
  • .3s：过渡持续时间
  • ease-in：过渡的内部时序
    • ease：慢速开始，然后加速，再慢下来，结束时特别慢
    • linear：整个过渡过程保持相同的速度
    • ease-in：慢速开始，然后加速
    • ease-out：快速开始，然后减速
    • ease-in-out：与 ease 类似，中间较快，两端很慢，但不同速
  • .1s：延迟过渡的时间

animation（动画）

• 定义关键帧

  • from/to

  @keyframes nameOfAnimation {
      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%; }
  }
  

• 挂载动画（把动画应用到元素上）

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