CSS 知识总结

• 浏览器渲染方法

  1、根据 HTML 构建 HTML 树

  2、根据 CSS 构建 CSS 树

  3、将上面两个树合并成一棵渲染树

  4、 Layout布局

  5、Paint绘制

  6、Compose合成

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

  • transition 是过渡，作用就是补充你中间帧，但不是所有属性都可以过渡，block、visible 不能过渡
  • animation 是动画，声明关键帧，通过@keyframes更好控制中间步骤。

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

• CSS 知识点

1、CSS 布局：float 布局、flex 布局、grid 布局

2、CSS定位：relative、absolute、fixed

3、CSS动画: transition、animation