《CSS知识总结》

通过这几天在饥人谷对css的学习我学习到了很多

主要有以下内容：

• 浏览器的渲染原理
  1. 浏览器会根据HTML构建HTML树(DOM)
  2. 根据CSS构建CSS树(CSSOM)
  3. 将两条树合并为渲染树(render tree)
  4. 先是加载Layout布局(文档流，盒模型，计算大小，位置)
  5. paint(绘制)
  6. 最后再合成(根据层叠关系展示画面)
• CSS 动画的两种做法（transition 和 animation）

  transtion:

    	语法： transition: 属性名 时长 过渡方式 延迟 也可以直接写all .5s
    	注意:并不是所有属性都能过渡
    	display: none => block 不能过度	一般用visibility:hidden => visible
    	 animation:
    	 语法: animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式| 是否暂停 | 动画名
    	这里可以给animation 加 关键帧的名字
    	例如 
    	````animation： xxx 800ms infinite alternate;
    	@keyframe xxx {
    	0%{
    	transform: scale(1.0);
    		}
    	100%{
    	transform: scale(1.5);
    			}
    								}