問題描述

如果您想知道以什么順序輸入 CSS 屬性，如 border、padding、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 properties)

不要與選擇器混淆(#id、.class、:hover、tagname)在這種情況下，順序非常重要.

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

按字母順序排列的選項對我來說沒有多大意義.一方面，它將 padding 和 line-height 粘貼在 width 和 height 或 left 的中間 和 top.

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.

我將使用 來自 fordinteractive.com 的列表發布 CW 答案，該列表是由 jacobangel 提供.

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

非常好，但不完整.有一些項目丟失.我希望找出丟失的那些像 font-style 和 clip 這樣的地方.

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.

我發布此內容是因為在 Google 和 我所知道的是不完整的(我什至在谷歌上都找不到).我希望如果在其中編輯新的，我們將有一個每個人都可以遵循的完整列表.

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.

推薦答案

Box Model Convention 復制自 http://fordinteractive.com/tools/propertyorder/propertyorder.css.

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.

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 應該去哪里?(除了帶有 -moz-user-select 的 Mozilla 和帶有 -webkit-user-select 的 Chrome 之外不支持.IE 使用 JavaScript onselectstart)
• border-radius應該去哪里?(不支持，除了帶有 -moz-border-radius 的 Mozilla 和帶有 -webkit-border-radius 的 Chrome)
• 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 框模型屬性排序約定的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！