css学习就是看 MDN文档多用多练，下面就捡主要的一些放上。
网页布局（layout）
布局的传统解决方案，基于盒状模型，依赖
display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
- flex布局
现在flex的兼容程度已经很高了，可以放心大胆的使用。flex布局更多的是解决了一维方向的布局问题。用几句代码就可以解决很多的布局。
flex的学习可以参考课程。看文档的话，可以参考阮一峰写的教程，学习完成可以用这个小游戏练习，加强记忆，css的学习就是多用多练。
- grid布局
上面说到flex是解决一维的布局问题，那么grid布局就是解决二维布局的问题。不过现在grid布局兼容程度还不管太好。
视频学习可以参考相关课程。看文档的话，可以参考阮一峰写的 教程，grid学完同样也有一个小游戏来加强记忆。
浏览器渲染原理
- 渲染步骤
- 根据 HTML 构建 HTML Tree（DOM）
- 根据 CSS 构建 CSS Tree（CSSOM）
- 将两棵树合并成一棵渲染树 （ender tree）
- Layout布局 （文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
CSS 动画 transition
- 写法
transition：属性名 时长 过渡方式 延迟； - 常用属性取值
transform:
translate位移：可以使用X、Y、Z轴（例如：translateX、translateY、translateZ）
scale缩放：transform：scale(?) 缩放倍数大小
rotate旋转：transform：rotate(45deg)顺时针旋转45度
skew倾斜：transform：skew(45deg)以轴为中心，页面内立体倾斜
CSS 动画 animation
- 写法
animation：时长，过渡方式，延迟，次数，方向，填充模式，是否暂停，动画模式； - 常用属性取值
animation:
通过@keyframes定义值{0%-100%} 调用过渡手段表述动画过程
常用属性：reresel反向 |alternate交替 |alternate-reresel先回来再交替 |infinite无限次数执行 |paused暂停 |running恢复暂停 |
css的三种更新渲染方式
css更新方式
- 第一种，全部执行，比如：
div.remove() 会触发当前消失，其他元素relayout - 第二种，跳过 layout，比如：
改变背景颜色，直接 repaint + composite - 第三种，跳过 layout 和 paint，比如：
改变 transform，只需 composite
