CSS知识总结

css学习就是看 MDN文档多用多练，下面就捡主要的一些放上。

网页布局（layout）

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

• flex布局

现在flex的兼容程度已经很高了，可以放心大胆的使用。flex布局更多的是解决了一维方向的布局问题。用几句代码就可以解决很多的布局。

flex的学习可以参考课程。看文档的话，可以参考阮一峰写的教程，学习完成可以用这个小游戏练习，加强记忆，css的学习就是多用多练。

• grid布局

上面说到flex是解决一维的布局问题，那么grid布局就是解决二维布局的问题。不过现在grid布局兼容程度还不管太好。

视频学习可以参考相关课程。看文档的话，可以参考阮一峰写的 教程，grid学完同样也有一个小游戏来加强记忆。

浏览器渲染原理

• 渲染步骤

1. 根据 HTML 构建 HTML Tree（DOM）
2. 根据 CSS 构建 CSS Tree（CSSOM）
3. 将两棵树合并成一棵渲染树 （ender tree）
4. Layout布局 （文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影等画出来）
6. 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