《CSS 知识总结》

浏览器渲染原理

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

CSS 动画的两种做法

1. transition

• 作用：补充中间帧
• 语法： transition:属性名 时长 过渡方式 延迟
  可用逗号分隔两个不同属性；
  过渡必须要有开始结束；

2.animation

• 语法：animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
  所有属性都有对应的单独属性，可单独设置

• 添加关键帧写法（可搜索keyframes MDN）

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

学习体会

css学习内容较多，遇到问题多实践，用过了就会熟练很多。

.