CSS 属性申明顺序
仓禀实而知礼仪，衣食足而知荣辱，满足根本的须要，就会谋求更高的层次。
写CSS代码大致也是如此的规律，入门阶段，最大的满足是可以完成页面失常展现。
属性的申明没有任何规律可言，根本是想到哪写到哪，随着程度提高，逐渐对代码品质有了要求。
比如对于CSS代码功能的要求，CSS属性申明正当性排序的要求等。
代码功能的要求次要在抉择器的正当利用，详细参阅CSS 抉择器功能优化一章节。
本文引见一下CSS属性排序方面的规范，首先强调一点，CSS属性的申明顺序与功能有关。
属性申明排序的重要性基于如下几点准则：
（1）.划一有序，有规律可循，对于团队开发和前期维护有着重要意义。
（2）.从心思层面来看，对于写代码或许维护代码者来说能够有更为舒心愉悦。
一.属性排序规则：
（1）.文档流相干属性（display, position, float, clear, visibility, table-layout）
（2）.盒模型相干属性（width, height, margin, padding, border）
（3）.排版相干属性（font, line-height, text-align, text-indent, vertical-align）
（4）.装璜性相干属性（color, background, opacity, cursor）
（5）.文字排版（font, line-height, letter-spacing, color- text-align）
（6）.生成内容相干属性（background, border）
顺便阐明：
（1）.上面并没有罗列涵盖一切的属性，只是一局部。
（2）.分类之间利用一个空行分隔，前面会有代码实例演示。
（3）.并不肯定严厉遵照上述准则，由于这是一个最佳实际，与标准和功能有关，并且有些属性难以归类，比如border-color是纳入盒模型相干还是装璜性相干，所以只需保证整个开发团队利用齐全相反的一套CSS属性排序规范，总体符合上述准则即可。
二.代码实例如下：
下面就以对一个链接元素停止一些相干的CSS设置来演示一下排序规则。
对链接A元素设置的指标是：
（1）.将其转换为一个块级元素，并设置失当尺寸。
（2）.设置肯定的内外边距。
（3）.设置肯定的背风光欲文本色彩。
（4）.去掉链接自带的下划线，文本居中显示。
代码实例如下：
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="" /> <title>HELLO素材网</title> <style type="text/css"> .ant { display: block; margin: 1em 0; padding:1em 4em; width:100px; height:20px; border:0.25em solid #196e76; color:#fff; background:#196e76; box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 0.3em 0.3em 0 #444; font-size:1em; text-align:center; text-transform:uppercase; text-decoration:none; } </style> </head> <body> <a class="ant">HELLO素材网</a> </body> </html>上述代码就是依照后面讲的准则对CSS属性申明排序，再强调如下两点：
（1）.每一个分类用空行分隔。
（2）.排序规范不是硬性的，要害是一个团队或许集体一直遵照共同分歧的一套规范。
上述代码也可能修正成如下排序：
[CSS] 纯文本查看 复制代码
.ant { display: block; margin: 1em 0; padding:1em 4em; width:100px; height:20px; color:#fff; border:0.25em solid #196e76; background:#196e76; box-shadow:inset 0.15em 0.15em 0.3em rgba(0,0,0,0.3), 0.3em 0.3em 0 #444; font-size:1em; text-align:center; text-transform:uppercase; text-decoration:none; }齐全没有成绩，还是那句话，不是硬性规定，团队遵照同一套规范。
三.CSS属性排序总结：
[CSS] 纯文本查看 复制代码
.ant { display: ; visibility: ; float: ; clear: ; position: ; top: ; right: ; bottom: ; left: ; z-index: ; width: ; min-width: ; max-width: ; height: ; min-height: ; max-height: ; overflow: ; margin: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; padding: ; padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; border: ; border-top: ; border-right: ; border-bottom: ; border-left: ; border-width: ; border-top-width: ; border-right-width: ; border-bottom-width: ; border-left-width: ; border-style: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-color: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; outline: ; list-style: ; table-layout: ; caption-side: ; border-collapse: ; border-spacing: ; empty-cells: ; font: ; font-family: ; font-size: ; line-height: ; font-weight: ; text-align: ; text-indent: ; text-transform: ; text-decoration: ; letter-spacing: ; word-spacing: ; white-space: ; vertical-align: ; color: ; background: ; background-color: ; background-image: ; background-repeat: ; background-position: ; opacity: ; cursor: ; content: ; quotes: ; }上面是常见CSS属性的一些排序最佳实际，可能做一下参考。
