CSS盒子型号属性订购公约

如果您想知道以什么顺序输入您的CSS属性，如border，padding,font-family等。两种常见的方法似乎是按字母顺序排列和框模型。（参见： Conventional Order of CSS properties）CSS盒子型号属性订购公约

这不与选择（#id，.class，:hover，tagname）相混淆在这种情况下，为了事情非常多。

字母选项对我来说没有多大意义。一方面，它在width和height或left和left和top的中间保持padding和line-height。

我会用jacobangel提供的list from fordinteractive.com发表CW解答。

这是非常好的，但它不完整。有一些项目丢失。我希望找出失踪人员去的地方，如font-style和clip。

这些新产品应该放在哪里？还有其他人失踪了吗？如果已经有相同的建议，那么投票评论，以表明你认为这是一个好主意。也可能会有更多的缺失。我希望这是一个完整的清单。如果有一个工具或者IDE功能可以按照这个列表进行排序，这也是一个好主意。

我发布这个，因为似乎没有可以在谷歌上找到的另一个页面，the one I do know of是不完整的（甚至在Google上我都找不到）。我希望如果编辑新的，我们将有一个完整的列表，每个人都可以遵循。

来源

2011-02-08 George Bailey

你应该澄清你的问题是什么。 – coreyward 2011-02-08 21:20:31

从http://fordinteractive.com/tools/propertyorder/propertyorder.css复制的箱型号公约。

添加应该在列表中找不到时添加。请在添加到最终列表之前评论您认为添加并等待达成协议的位置。

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: ;

应该在哪里clip去？
user-select应该去哪里？（不支持，除了由Mozilla用-moz-user-select和Chrome用-webkit-user-select IE使用JavaScript onselectstart）
border-radius应该去哪里？（不支持除由Mozilla与-moz-border-radius和Chrome与-webkit-border-radius）

，如果你有一个建议，以某个地方在哪里应该去请评论。

来源

2011-02-08 21:21:24

建议：`font-weight`紧跟`font-style` – 2011-02-08 21:29:07

这是有道理的：

组具有类似功能特性（如height和width或clear和float），因为如果要改变一个属性的值，我们经常会改变其他属性的值该组织也是如此。
订购属性组，使它们处于决策顺序。例如position之前float，因为如果我选择position: absolute,float将是无关紧要的。

来源

2013-11-22 07:12:41

CSS盒子型号属性订购公约

回答

相关问题