CSS学习总结

浏览器的渲染机制

1. 解析HTML字符串构建DOM树
2. 解析CSS样式，产生CSSOM树
3. 执行js脚本文件，js加载完成，通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
4. 浏览器根据DOM树和CSSOM树构建渲染树（rendering tree），渲染树包括显示的节点和节点显示的样式信息，如果某个节点设置了样式 display: none，那么就不会在渲染树中显示，如果设置visibility:hidden渲染树中存在该节点，但不显示。
5. 根据渲染树对每一个节点在页面上进行布局（文档流、盒模型、计算元素的大小和位置）。（reflow）
6. 遍历渲染树，为每一个节点绘制（paint）对应的样式，比如边框的颜色、文字的颜色、阴影等（repaint）
   7.根据层叠关系显示到屏幕。

reflow和repaint

在第5步和第6步中，各个节点自身的盒模型，浏览器根据样式计算该节点元素该放置的位置，这个过程为reflow；当各个节点元素的位置、大小以及其他属性，例如颜色、字体大小等确定之后，浏览器将各个元素根据这些特性绘制页面，这个过程叫repaint。

CSS动画 （transition 和 animation）

transition 只能执行一次(必须有起始状态，比如从hover 到非hover)
animation 可多个状态 循环重复多次执行
transition: 属性名 时长 过渡方式 延迟

• property 属性名：all（所有属性） | css中属性（width、color等）
• duration 时长：指定过渡时长
• 过渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
• 延迟delay：动画开始之前暂停的时间
  并不是所有属性都能过渡！
  display:none =>display:block;无法过渡，一般改成visibility:hidden =>visible
  animation: name duration timing-function delay iteration-count direction fill-mode;
• 动画名name:
• 时长duration :1s或者1000ms
• 过渡方式 timing-function:linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier | step-start | step-end | steps
• 是否延迟delay:0s默认不延迟 | 其他数值时间
• 次数 iteration-count: infinite | 数字
• 方向direction :normal | alternate | reverse | alternate-reverse
• 填充模式fill-mode: none | forwards | backwards | both