問題描述

如果您想知道以什么順序輸入 CSS 屬性，如 border、padding、font-family 等.兩種常見的方法似乎是按字母順序和盒子模型.(看:CSS 屬性的常規(guī)順序)

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.

按字母順序排列的選項(xiàng)對(duì)我來說沒有多大意義.一方面，它將 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 的列表發(fā)布 CW 答案，該列表是由 jacobangel 提供.

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

非常好，但不完整.有一些項(xiàng)目丟失.我希望找出丟失的那些像 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.

這些新的應(yīng)該在列表中的什么位置?是否還有其他遺漏?如果已經(jīng)有針對(duì)同一件事的建議，請(qǐng)投票支持該評(píng)論，以表明您認(rèn)為這是一個(gè)好主意.此外，可能還會(huì)有更多缺失.我希望這是一個(gè)完整的列表.如果有可以按此列表排序的工具或 IDE 功能也是一個(gè)好主意.

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.

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

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 復(fù)制自 http://fordinteractive.com/tools/propertyorder/propertyorder.css.

Box Model Convention copied from http://fordinteractive.com/tools/propertyorder/propertyorder.css.

當(dāng)發(fā)現(xiàn)列表中缺少添加項(xiàng)時(shí)，應(yīng)進(jìn)行編輯.請(qǐng)?jiān)谀J(rèn)為添加的地方發(fā)表評(píng)論，并在將它們添加到最終列表之前等待達(dá)成一致.

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應(yīng)該去哪里?
• user-select 應(yīng)該去哪里?(除了帶有 -moz-user-select 的 Mozilla 和帶有 -webkit-user-select 的 Chrome 之外不支持.IE 使用 JavaScript onselectstart)
• border-radius應(yīng)該去哪里?(不支持，除了帶有 -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)

如果您對(duì)應(yīng)該去哪里有建議，請(qǐng)發(fā)表評(píng)論.

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

這篇關(guān)于CSS 框模型屬性排序約定的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

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