点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
样式是大家最为熟悉的部分，然而对于样式属性的放置顺序却少有关注，我也一样，我对于样式属性放置顺序就是出于可读性来考虑的。让我们从下面这段代码说起。
上面这段CSS代码几乎包含了所有要写的样式类型，这也是基于可读性来考虑的一段代码。下面我就来简单分析一下它的书写顺序，给大家一些参考。
1. 当包含content属性时，立即将它放在最前面来写
很好理解，有它才有后面的代码。
如上代码content属性。
2. 第二步考虑写Positioning Model
相关属性包括：position/top/right/bottom/left/z-index/display/float等等。
也很好理解，因为它可以使一个元素脱离正常的文档流。且能够覆盖盒模型相关的样式。
如上代码，display/position/left/top。
3. 第三步考虑写Box Model
这一步考虑写盒模型的样式，它可以决定一个DOM的大小和位置。
相关属性包括：width/height/padding/margin/border/overflow/......
如上代码width/height。
4. 第四步考虑写Typographic文本排版
相关属性包括：font/line-height/text-align/word-wrap。
5. 第五步考虑写Visual视觉外观。
相关属性包括：color/background/list-style/transform/animation/transition。
如上代码background/transform。
