CSS知识总结

浏览器渲染原理

浏览器渲染过程

• 步骤

1. 根据HTML构建HTML树(DOM)
2. 根据CSS构建CSS树(CSSOM)
3. 将两棵树合并成一颗渲染树 (render tree)
4. Layout布局(文档流、 盒模型、计算大小和位置)
5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
6. Compose合成(根据层叠关系展示画面)

三种更新方式

CSS动画

用transition

transform四个常用功能

• 位移translate
• 缩放scale
• 旋转rotate
• 倾斜skew

用animation

@keyframes完整语法

/*第一种方法*/
@keyframes slidein{
	form{
		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%; }
}

animation缩写语法为

• animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名 ;