这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
相信很多刚入门前端的小伙伴 甚至 一些在前端行业摸爬滚打多年的程序员都没有意识到：原来CSS样式书写顺序也是有讲究的。
就像我刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么CSS书写到底应该遵循什么样的顺序呢？且往下看：
- 定位属性：position display float left top right bottom overflow clear z-index
- 自身属性：width height padding border margin background
- 文字样式：font-family font-size font-style font-weight font-varient color
- 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
- css3中新增属性：content box-shadow border-radius transform……
为什么是这样的顺序呢？ 需要了解一下 回流和重构，这决定着css样式书写顺序的优化方向。
文档加载完成到完全显示之间的过程：
根据文档加载生成DOM树（包含display：none；节点）； 在DOM树基础上根据节点的几何属性（padding、margin、width等）生成render树（不包含display：none：和head，但是包括visibility:hidden;）； 在render树基础上继续渲染color、outline等样式； 当render树上的一部分或者全部，因为大小边距等问题发生改变需要重建的过程叫做回流；
当元素的一部分属性如背景色等发生变化，而不影响页面布局需要重新渲染的过程叫做重绘。
有了对文档加载过程的理解，我们很容易发现，要想网页加载得快，加载得流畅，就要减少浏览器回流，提升dom的性能
在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染，所以定位元素和z-index要放在最开始的位置，上来就告诉浏览器应当怎么加载。
