1 CSS排版

1.1 盒

box-sizing：

• content-box，width只包含content的宽度
• border-box，width包含了border和padding的宽度

1.2 正常流

1. 收集盒（和文字）进行
2. 计算盒在行中的排布
3. 计算行的排布
   

1.2.1 正常流的行级排布

1.2.2 正常流的块级排布

margin折叠只会发生在正常流的BFC中

1.2.3 BFC合并

BFC合并会发生在 block box设置了overflow：visible的情况下
属于同一个BFC的block box会发生边距折叠

1.3 Flex排版

2 CSS动画和绘制

2.1 CSS动画

1. animation

• @keyframes 定义关键帧
• animation 使用关键帧
  • animation-name 时间曲线
  • animation-duration 动画时长
  • animation-timing-function 动画的时间曲线，三次贝塞尔曲线，可以完美拟合直线和抛物线
  • animation-delay 动画开始前的延迟
  • animation-iteration-count 动画的播放次数
  • animation-direction 动画的方向
    在关键帧中定义transition可以灵活设置两个关键帧之间的时间曲线，在animation中设置的话，关键帧之间的时间曲线是相同的

2. transition

• transition-property 要变换的属性
• transition-duration 变换的时长
• transition-timing-function 时间曲线
• transition-delay 延迟

2.2 CSS颜色

2.3 CSS绘制