1. CSS 定位
1.1 浮动元素脱离文档流-position
- static 默认值，待在文档流里
- relative 相对定位，升起来但不脱离文档流
用于做位移；用于给absolute元素做父元素
- absolute 绝对定位，定位基准是祖先里的非static元素
脱离原来位置，另起一层；鼠标提示
- fixed 固定定位，定位基准是viewport，移动端兼容性较差
用于制作广告位；制作回到顶部按钮
- sticky 粘滞定位，目前的兼容性较差
1.2 层叠上下文（MDN文档）
- 每个层叠上下文就是一个新的作用域，这个作用域里的z-index与外界无关，处在同一作用域里的z-index才能比较
- 哪些不正交的属性可以创建层叠上下文
* html 元素
* position: relative; z-index: 0;
* position: absolute; z-index: 0;
* position:fixed; z-index: auto;
- z-index
* auto 默认值，不创建新层叠上下文
* 0 / 1 / 2
* -1 / -2
2. CSS 动画
2.1 浏览器渲染步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
- Composite 合成（根据层叠关系展示画面）
2.2 更新样式
- 一般使用JS来更新样式
- 如何了解某个属性触发的更新流程：进此链接了解
2.3 CSS 动画优化
- JS 优化
使用requsetAnimationFrame代替setTimeout或setInterval
- CSS 优化
使用will-change或translate
2.4 动画关键帧-transform （常用功能）
- 位移tranaslate
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
- 缩放 scale
<scale()> = scale( <number> , <number>? )
<scaleX()> = scaleX( <number> )
<scaleY()> = scaleY( <number> )
- 旋转rotate
<rotate()> = rotate( [ <angle> | <zero> ] )
<rotateX()> = rotateX( [ <angle> | <zero> ] )
<rotateY()> = rotateY( [ <angle> | <zero> ] )
<rotateZ()> = rotateZ( [ <angle> | <zero> ] )
- 倾斜 skew
<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> = skewX( [ <angle> | <zero> ] )
<skewY()> = skewY( [ <angle> | <zero> ] )
2.5 CSS 动画过渡-transition
- transition:
属性名 | 时 | 过渡方式 | 延迟 - 可以用逗号分隔两个不同属性
transition: left 1s, top 2s - 可以用all代表所有属性
transition:all 2s - 常见过渡方式：
linear | ease | ease-in | ease-out | ease-in-out
2.6 CSS 动画过渡-animation
- animation:
时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名 - 时长：1s、1000ms等
- 过渡方式：和transition相同，如linear
- 次数：
整数 | 小数 | infinite - 方向：
reverse | alternate | alternate-reverse - 填充模式：
none | fowards | backwards | both - 是否暂停：
paused | running - 示例：
@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%; }
}
