CSS知识总结浏览器渲染原理渲染步骤：根据HTML构建HTML树(DOM) 根据CSS构建CSS树(CSSOM) 将

浏览器渲染原理

渲染步骤：

根据HTML构建HTML树(DOM)
根据CSS构建CSS树(CSSOM)
将两颗数合并成渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等画出来)
Compose 合成 (根据层叠关系展示画面) 渲染引擎在取得内容之后的基本流程：

　　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

简单解释每个步骤

DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree:DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

如何得知CSS属性的渲染情况

打开 csstriggers.com/ 查看相关属性的渲染情况。

渲染总结

浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
将CSS解析成 CSS Rule Tree 。
根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

transform(变形)

注意：transform属性是静态属性(很多人误以为是动画属性)，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是CSS的图形变形工具。

用法分析

transform字面上就是变形、改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和平移translate。
语法： transform: rotate(deg) | scale | skew | translate;
这里需要提醒大家，以往我们叠加效果都是用逗号（“,”）隔开，但transform中使用多个属性时只需要用空格隔开。

transition(过渡)

W3C标准中对CSS3的transition是这样描述的：“CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。”

在实际的开发中，经常会遇到手机上的JS动画卡顿现象，所以需要借用其他办法来替代使用，而CSS3的过渡就可以很好的解决这个问题。

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

主要应用点：在鼠标单击、经过、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

语法： transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;
transition主要包含四个属性值：
1. 执行变换的属性：transition-property；
2. 变换延续的时间：transition-duration；
3. 在延续时间段，变换的速率变化：transition-timing-function；
4. 变换的延迟时间：transition-delay;
有时不只改变一个CSS效果的属性，而是想改变两个或者多个CSS属性的transition效果，那么只要把几个transition的声明串在一起，用逗号（“,”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。
但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的值为transition-duration，第二个为transition-delay。

animation(动画)

animation根据这个@keyframes(关键帧)提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，@keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大
在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

Animation和Transition一样有自己相对应的属性，那么在Animation主要有以下几种属性：动画名称(animation-name)、动画持续时间(animation-duration)、动画的速度曲线(animation-timing-function)、动画延迟时间(animation-delay)、动画播放次数(animation-iteration-count)、动画播放方向(animation-direction)

CSS3的Animation类似于Transition属性，都是随着时间改变元素的属性值。主要区别是Transition需要触发一个事件(hover事件或click事件等)才会随时间改变其CSS属性；而Animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素CSS的属性值，从而达到一种动画的效果。

CSS知识总结