CSS知识小总结

一.浏览器渲染原理

• 步骤

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两个树合并成一颗渲染树（Render tree）
4. Layout布局(文档流、盒模型、计算大小和位置)
5. Composite合成（根据层叠关系展示画面）

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

1.transition

transition 意思就是过渡，即给属性变化添加过渡效果。

我们知道，如果两个样式属性被赋在同一个元素上，后一个样式属性会覆盖前一个，比如：

.square {
  width: 200px;
  height: 200px;
  background: red;
  /* 不透明 */
  opacity: 1;
}
.square:hover {
  /* 透明30% */
  opacity: 0.2;

当我们把鼠标放在红方块上时，方块会立刻变透明

而如果我们给方块增加 transition 属性，其透明度变化会有一个过渡

.square {
  ...
  /* 不透明 */
  opacity: 1;
  /* 改变 opacity 属性，过度时间1秒 */
  transition: opacity 1s;
}
.square:hover {
  /* 透明30% */
  opacity: 0.2;
}

这时当我们把鼠标放在红方块上时，方块变透明就会有1秒时间的过渡效果

语法:

• transition：属性名 时长 过度方式 延迟
• 可以用逗号分隔两个不同属性名 例：transition:opanity 1s,left 1000ms;
• 可以用all代表所有属性 例：transition:all 1s;
• 过渡方式有：liner/ease(默认)/ease-in/ease-out...

transition 可以同时给多个属性添加过渡效果，比如可以在移动元素的同时，改变其透明度。但不管有多少个属性同时在变化，这种过渡效果只能是一次性的，也就是单个动作.

2.animation

transition 只能做单个动作，如果动画包含多个动作，这时候就需要 animation

我们先来看个动画效果：

这个动画明显由两个动作组成：红变绿，绿变蓝。

两个连续的动作有三个关键点，两个连续的动作必然也有三个关键帧（keyframe），我们通过定义这三个关键帧（起点，红变绿，终点绿变蓝）来定义这两个动作

.square {
  ...
  background: red;
  position: relative;
  animation: yd 3s linear forwards;
}
@keyframes yd {
  0% {left: 0;top: 0;}
  50% {left: 50px;top: 0;background: green;}
  100% {left: 50px;top: 50px;background: #0000ff;}
}

@keyframes中的百分比，代表时间尺度上的百分比 ，后面跟着的是此时间点的样式

语法:

• animation:时长/过渡方式/延迟/次数/方向/填充方式/动画名;
• 时长：1s或1000ms
• 过渡方式：跟transition取值一样，如liner
• 次数：数值多少次或infinite(无限)
• 填充模式：none/forward/backwards/both