CSS 知识总结

浏览器渲染原理

过程：

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一个渲染树（render tree）
4. layout布局（文档流、盒模型、计算大小和位置）
5. paint绘制（边框颜色、文字颜色等等）
6. composite合成（根据层叠关系展示画面） 三种更新样式的方式
7. js--style--layout--paint--composite
8. js--style--paint--composite
9. js--style--composite

css动画的两种做法

一、用transform和transition
transform用法

1. translate位移

值可以是像素，也可以是百分比
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<translatez()> = translateY( <length-percentage> )//垂直于屏幕方向，不常用；用的话给父元素添加perspective属性，确定原点

可以使用translate设置绝对定位元素居中：

top:50%; left:50%; transform:translate(-50%,-50%)

2. scale缩放 scale（1.2）放大原来的2倍。也可以设置X、Y；不常用，会模糊

3. rotate旋转
   rotate（45deg）顺时针旋转45度
   一般用于360度旋转按钮

4. skew倾斜
   skew(45deg，45deg); //水平方向和垂直方向各倾斜45度

transform可以组合使用；
transform：none； //取消所有

transition过度
作用：补充中间帧
语法：transition：属性名 时长 过度方式 延迟

• 可以用逗号分隔不同属性：transition：left200ms,top400ms
• 可以用all表示所有属性
• 过渡方式：linear | ease(默认） | ease-in | ease-out | ease-in-out 等等
• 并不是所有属性都能过渡 display：none到display：block不可以
• 如果动画有中间点，就使用两次transform：

   b--transform--c;
   用setTimeout或者监听transitionend事件

二、animation动画
步骤：①声明关键帧；②添加动画
keyframes的2种语法

一、from...to写法
@keyframes xxx{
 0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}

二、百分比写法
@keyframes xxx{
 0%{
    top：0;left：0;
  }
  20%，50%{
    left：50%;
  }
  100%{
    top:100px;left:100%;
  }
}

animation缩写语法
animation：时长| 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
animation：animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state

• 过渡方式跟transition一样
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwords | both
• 是否暂停：paused | running
• 以上所有属性都有对应的单独属性，改变单个属性时写单独属性名
• 让动画停在最后一帧，加个forwards

其他想法

css属性很多，要在动手做的过程中慢慢学习，查MDN学习使用方法，需要慢慢积累经验！！！