CSS 盒模型属性排序约定
如果您想知道以什么顺序输入 CSS 属性，例如 border、padding、font-family 等。两种常见的方法似乎是按字母顺序排列和盒模型。 （看： CSS 属性的常规顺序）
不要与选择器（#id、. class, :hover, tagname) 在这种情况下，顺序非常重要。
按字母顺序选项对我来说没有多大意义。一方面，它将 padding 和 line-height 粘贴在 width 和 height 或 left 的中间 和顶部。
我将发布一个 CW 答案，其中包含 来自 fordinteractive.com 的列表，该列表由 < a href="https://stackoverflow.com/questions/4878655/conventional-order-of-css-attributes/4878696#4878696">jacobangel。
它非常好，但还不完整。有几件物品丢失。我希望找出丢失的内容，例如 font-style 和 clip。
这些新的应该放在列表中的哪里？还有其他人失踪吗？如果已经有人对同样的事情提出建议，那么请投票支持该评论，以表明您认为这是一个好主意。而且可能还会有更多的缺失。我希望这是一个完整的列表。如果有一个工具或 IDE 功能可以按此列表排序，那也是一个好主意。
我发布此内容是因为在 Google 和 该页面上似乎找不到其他页面我确实知道是不完整的（甚至在谷歌上我也找不到）。我希望如果有新的编辑，我们将有一个每个人都可以遵循的完整列表。
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 properties)
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.
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.
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
盒模型约定复制自 http://fordinteractive.com/tools/propertyorder/propertyorder.css。
当发现列表中缺少添加内容时，应进行编辑。请评论您认为需要添加的地方，并在将其添加到最终列表之前等待达成一致。
clip应该去哪里？用户选择应该去哪里？ Mozilla 和使用-webkit-user-select的 Chrome 之外，不支持。IE 使用 JavaScriptonselectstart）-moz-user-select的 border-radius 应该去吗？ （除了使用-moz-border-radius的 Mozilla 和使用-webkit-border-radius的 Chrome 之外，不支持）如果您对应该去哪里有建议，请发表评论。
Box Model Convention copied from http://fordinteractive.com/tools/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.
clipgo?user-selectgo? (not supported except by Mozilla with-moz-user-selectand Chrome with-webkit-user-select. IE uses JavaScriptonselectstart)border-radiusgo? (not supported except by Mozilla with-moz-border-radiusand Chrome with-webkit-border-radius)Please comment if you have a suggestion as to where something should go.
有意义的是：
height和width或clear和float）分组，因为如果我们更改一个属性的值，通常也会更改组中其他属性的值。float之前的position，因为如果我选择position:absolute，float将无关紧要。It makes sense to:
heightandwidthorclearandfloat) because if we change the value of one property, we often change the value of other properties in the group too.positionbeforefloat, because if I chooseposition: absolute,floatwill be irrelevant.