大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。
各种类型属性的书写顺序及作用：
书写顺序
1.优先级第一定位属性：position display float left top right bottom overflow clear z-index
2.优先级第二自身属性：width height padding border margin background
3.优先级第三文字样式：font-family font-size font-style font-weight font-varient color
4.优先级第四文本属性：text-align vertical-align text-wrap text-transform text-indent text- decoration letter-spacing word-spacing white-space text-overflow line-height
5.优先级第五css3中新增属性：content box-shadow border-radius transform……
书写顺序的作用
减少浏览器reflow（回流），提升浏览器渲染dom的性能。
扩展: 回流必将引起重绘, 重绘不一定引起回流。
- reflow（回流）: 会引起元素位置变化的就会reflow(回流),窗口大小改变、字体大小改变、以及元素位置改变，都会引起周围的元素改变他们以前的位置。
- repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，可是元素的几何尺寸没有变。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在2、3、4步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。
这里大家可能不是很理解，但只要记住书写样式时按照上面的书写顺序就会提高程序的性能与网页的流畅度。
<div id="box"></div>
<style>
// 未按照属性书写顺序：
#box{
width:200px;
line-height: 30px;
height:200px;
color:blue;
background:lightgoldenrodyellow;
float:right;
}
// 按照属性书写顺序：（推荐使用）
#box{
float:right;
width:200px;
height:200px;
background:lightgoldenrodyellow;
color:blue;
line-height: 30px;
}
<style/>注意
- render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。
- 有些状况，好比修改了元素的样式，浏览器并不会理科reflow或repaint，而是把这些操做积攒一批，而后作一次reflow，这也叫作异步reflow.但在有些状况下，好比改变窗口，改变页面默认的字体等，对于这些状况，浏览器会立刻进行reflow.
- 为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。
布局流程
- 必须确定页面的版心(可视区),我们测量可知
- 分析页面中的行模块,以及每个行模块中的列模块,其实页面布局就是一行行罗列而成
- 制作html结构,我们还是遵循,现有结构后有样式的原则,结构永远最重要
- 然后开始运用盒子模型的原理,通过div+css布局来控制网页的各个模块
顺序书写的优点
- 正确的样式顺序有利于查看维护。
- 减小浏览器reflow（回流）与repaint（重绘），提高浏览器渲染dom的性能
- 利于网页加载代码，加快代码加载顺序。
- 正确的样式顺序也是css样式优化的一种方式。
