如果您想知道以什么顺序输入CSS属性,如border,padding,font-family等.两种常见的方法似乎是按字母顺序排列和Box模型. (看到:
Conventional Order of CSS properties)
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之外不支持)
如果您对应该去哪里有建议,请发表评论.