CSS属性书写顺序

建议遵循以下顺序：

1、布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）

2、自身属性：width/height/margin/padding/border/background

3、文本属性：color/font/text-decoration/text-align/vertical-align/white-space

4、其它属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background-image

示例：

.root {
    /*=====布局定位属性=====*/
    display: block;
    position: relative;
    float: left;

    /*=====自身属性=====*/
    width: 100%;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;

    /*=====文本属性=====*/
    font-family: '宋体';
    color: #333333;

    /*=====其它属性（CSS3）=====*/
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius:10px;
    -ms-border-radius:10px;
    border-radius: 10px;
}

遵循CSS的书写顺序是为了减少浏览器回流（reflow）,从而提升浏览器渲染DOM的性能。

搞清楚浏览器回流，要先知道浏览器的渲染流程，浏览器的渲染流程如下：

①解析HTML构建的DOM树，解析CSS构建CSS树：将HTML解析成树形的数据结构，将CSS解析成树形的数据结