CSS 知识总结

一些总结

浏览器渲染原理

步骤
1.根据HTML构建HTML树（DOM）
2.根据CSS构建CSS树（CSSOM）
3.将两棵树合成一颗树（render tree）
4.layout布局（文档流，盒模型，计算大小和位置）
5.pain绘制（把颜色边框文字阴影画出来）
6.合并

与ps画画一样的方法，但主体不一样。

CSS 动画的两种做法（transition 和 animation）

animation和transition的区别在于，
animation不用JS也可以做复杂的动画，transition要配合计时器等JS.

transition和animation用法可以查mdn和菜鸟教程
transition是过渡

一个让子元素在父元素内横向纵向的居中代码

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

并不是所有元素都能过度
inline元素不支持transiform要改成block
1.display：none=>block没法过度
2.一般改成visibility:hidden=>visible;

display和visibility的区别是：display: none;是彻底消失，不在文档流中占位，浏览器也不会解析该元素；不会被子元素继承。visibility:hidden;是视觉上消失了，在文档流中占位，浏览器会解析该元素；会被子元素继承

过度的时候子元素和父元素的position也有关系
relative和fixed

关于动画优化的官方文档

https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
。