CSS学习总结

浏览器的渲染机制

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

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

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