CSS盒模型属性订货公约 [英] CSS Box Model Attribute Ordering Convention

问题描述

如果你参加过什么才能进入你的CSS怀疑属性，如边框，填充， FONT-FAMILY 等两种常见的方法似乎是字母和盒状模型。 （看到：
CSS的常规订单属性）

If you ever wonder in what order to enter your CSS attributes like border, padding, font-family, etc. Two common approaches seem to be Alphabetical and Box Model. (See: Conventional Order of CSS attributes)

这不与选择器（混淆 #ID ，的.class ，：悬停，标记名），在这种情况下的顺序问题非常多。

This not to be confused with selectors (#id, .class, :hover, tagname) in which case the order matters very much.

按字母排序选项并没有多大意义了我。一方面它坚持填充和行高在宽度的中间和高度或离开和顶。

The Alphabetical option does not make much sense to me. For one thing it sticks padding and line-height in the middle of width and height or left and top.

我将发布一个答案CW与fordinteractive.com 其提供的名单由<一个href=\"http://stackoverflow.com/questions/4878655/conventional-order-of-css-attributes/4878696#4878696\">jacobangel.

I will post a CW answer with the list from fordinteractive.com which was provided by jacobangel.

这是非常好的，但它是不完整的。有几个项目丢失。我希望能找出失踪的人去喜欢字体样式和片段。

It is very nice, but it is not complete. There are a few items missing. I hope to find out where the missing ones go like font-style and clip.

应该在哪里这些新的列表中去？有没有缺少任何其他人呢？如果已经有一个建议，同样的事情再投票给意见，以显示你认为这是一个好主意。也有可能会是更多的人失踪。我希望这是一个完整的清单。这也将是一个好主意，如果有一个工具或IDE功能将由该列表排序。

Where should these new ones go in the list? Are there any others that are missing? If there was already a suggestion for the same thing then vote for that comment to show you think it is a good idea. Also there will probably be more that are missing. I hope for this to be a complete list. It would also be a good idea if there was a tool or IDE feature that would sort by this list.

我张贴这一点，因为似乎没有成为可在谷歌和找到另一页一个我知道的是不完整的（甚至没有在谷歌，我能找到）。我预计，如果新的是在编辑，我们将有一个完整的列表，每个人都可以遵循。

I am posting this because there does not seem to be another page that can be found on Google and the one I do know of is incomplete (not even on Google that I could find). I expect that if new ones are edited in that we will have a complete list that everyone can follow.

推荐答案

盒模型从公约 HTTP ：//fordinteractive.com/tool​​s/propertyorder/propertyorder.css

添置应在发现他们对从名单中失踪进行编辑。在哪里你认为补充和等待一些协议，将其添加到最终名单之前，请发表评论。

Additions should be edited in when they are found to be missing from the list. Please comment on where you think that additions and wait for some agreement before adding them to the final list.

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-用户选和Chrome与 -webkit-用户选 IE使用JavaScript 得到聚焦）


• 边界半径应该去哪里？ （不支持除由Mozilla与 -moz-边界半径和Chrome与 -webkit-边界半径）


• Where should clip go?
• Where should user-select go? (not supported except by Mozilla with -moz-user-select and Chrome with -webkit-user-select. IE uses JavaScript onselectstart)
• Where should border-radius go? (not supported except by Mozilla with -moz-border-radius and Chrome with -webkit-border-radius)

如果你有一个建议，到哪里的东西应该去请评论。

Please comment if you have a suggestion as to where something should go.

这篇关于CSS盒模型属性订货公约的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！