属性 – CSS Box模型属性排序约定

如果您想知道以什么顺序输入CSS属性,如border,padding,font-family等.两种常见的方法似乎是按字母顺序排列和Box模型. (看到：
Conventional Order of CSS properties)

这不要与选择器(#id,.class,：hover,tagname)混淆,在这种情况下,顺序非常重要.

字母顺序选项对我来说没有多大意义.一方面,它在宽度和高度的中间或左侧和顶部粘贴填充和线高.

我将使用jacobangel提供的list from fordinteractive.com发布CW答案.

这是非常好的,但它并不完整.有一些项目缺失.我希望找出丢失的字体样式和剪辑的位置.

这些新的应该放在列表中的哪个位置？还有其他人失踪吗？如果已经有同样的建议,那么投票给该评论,表明你认为这是一个好主意.也可能会有更多缺失的东西.我希望这是一个完整的清单.如果有一个工具或IDE功能可以按此列表排序,那也是一个好主意.

我发布这个是因为似乎没有其他页面可以在Google上找到并且the one I do know of不完整(甚至在Google上我都找不到).我希望如果编辑新的,我们将有一个完整的列表,每个人都可以遵循.

解决方法

Box Model Convention从 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: ;

>剪辑应该去哪里？
>用户选择应该去哪里？ (除了Mozilla使用-moz-user-select和Chrome使用-webkit-user-select之外不支持.IE使用JavaScript onselectstart)
> border-radius应该去哪里？ (除了Mozilla使用-moz-border-radius和Chrome使用-webkit-border-radius之外不支持)

如果您对应该去哪里有建议,请发表评论.

原文地址：https://www.jb51.cc/css/217883.html