CSS中簡(jiǎn)寫(xiě)屬性要注意TRouBLe的順序問(wèn)題(避免踩坑)

發(fā)布時(shí)間：2020-08-10 11:59:39 作者：佚名

這篇文章主要介紹了CSS中簡(jiǎn)寫(xiě)屬性要注意TRouBLe的順序問(wèn)題(避免踩坑),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

簡(jiǎn)寫(xiě)屬性是用于同時(shí)給多個(gè)屬性賦值的屬性。比如font是一個(gè)簡(jiǎn)寫(xiě)屬性，可以用于設(shè)置多種字體屬性。它指定了font-style、font-weight、font-size、font-height以及font-family。

font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;

還有如下屬性：

background是多個(gè)背景屬性的簡(jiǎn)寫(xiě)屬性：background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。
border是border-width、border-style以及border-color的簡(jiǎn)寫(xiě)屬性，而這幾個(gè)屬性也都是簡(jiǎn)寫(xiě)屬性。
border-width是上、右、下、左四個(gè)邊框?qū)挾鹊暮?jiǎn)寫(xiě)屬性。

簡(jiǎn)寫(xiě)屬性可以讓代碼簡(jiǎn)潔明了，但是也隱藏了一些怪異行為。

簡(jiǎn)寫(xiě)屬性會(huì)默默覆蓋其他樣式

大多數(shù)簡(jiǎn)寫(xiě)屬性可以省略一些值，只指定我們關(guān)注的值。但是要知道，這樣做仍然會(huì)設(shè)置省略的值，即它們會(huì)被隱式地設(shè)置為初始值。這會(huì)默默覆蓋在其他地方定義的樣式。比如，如果給網(wǎng)頁(yè)標(biāo)題使用簡(jiǎn)寫(xiě)屬性 font 時(shí)，省略 font-weight，那么字體粗細(xì)就會(huì)被設(shè)置為normal。

簡(jiǎn)寫(xiě)屬性會(huì)設(shè)置省略值為其初始值

添加如下CSS：

h1{ 
  font-weight: bold; 
} 
.title{ 
  font: 32px Helvetica, Arial, sans-serif; 
}

乍一看可能會(huì)覺(jué)得<h1 class="title">CSS屬性簡(jiǎn)寫(xiě)</h1>會(huì)將標(biāo)題加粗，但結(jié)果不是。以上代碼等價(jià)于下面的代碼：

h1 { 
  font-weight: bold; 
} 
 
.title { 
  font-style: normal;      （以下5行）這些屬性的初始值 
  font-variant: normal; 
  font-weight: normal; 
  font-stretch: normal; 
  line-height: normal; 
  font-size: 32px; 
  font-family: Helvetica, Arial, sans-serif; 
}

給<h1>添加這些樣式會(huì)顯示成普通的字體，而不是加粗的字體。這些樣式也會(huì)覆蓋從祖先元素繼承的字體樣式。在所有的簡(jiǎn)寫(xiě)屬性里，font的問(wèn)題最嚴(yán)重，因?yàn)樗O(shè)置的屬性值太多了。因此，要避免在<body>元素的通用樣式以外使用font。當(dāng)然，其他簡(jiǎn)寫(xiě)屬性也可能會(huì)遇到一樣的問(wèn)題，因此要當(dāng)心。

理解簡(jiǎn)寫(xiě)值的順序

簡(jiǎn)寫(xiě)屬性會(huì)盡量包容指定的屬性值的順序?？梢栽O(shè)置border: 1px solid black或者border: black 1px solid，兩者都會(huì)生效。這是因?yàn)闉g覽器知道寬度、顏色、邊框樣式分別對(duì)應(yīng)什么類(lèi)型的值。

但是有很多屬性的值很模糊。在這種情況下，值的順序很關(guān)鍵。理解這些簡(jiǎn)寫(xiě)屬性的順序很重要。

1. 上、右、下、左

當(dāng)遇到像margin、padding這樣的屬性，還有為元素的四條邊分別指定值的邊框?qū)傩詴r(shí)，開(kāi)發(fā)者容易弄錯(cuò)這些簡(jiǎn)寫(xiě)屬性的順序。這些屬性的值是按順時(shí)針?lè)较?，從上邊開(kāi)始的。

記住順序能少犯錯(cuò)誤。它的記憶口訣是TRouBLe：top(上)、right(右)、bottom(下)、left(左)。

用這個(gè)口訣給元素設(shè)置四邊的內(nèi)邊距。如下圖所示的鏈接，上內(nèi)邊距為10px，右內(nèi)邊距為15px，下內(nèi)邊距為0，左內(nèi)邊距為5px。雖然這些內(nèi)邊距看起來(lái)不是很均勻，但是可以說(shuō)明簡(jiǎn)寫(xiě)屬性的順序。

.nav a { 
  color: white; 
  background-color: #13a4a4; 
  padding: 10px 15px 0 5px;         /* 上、右、下、左內(nèi)邊距 */ 
  border-radius: 2px; 
  text-decoration: none; 
}

這種模式下的屬性值還可以縮寫(xiě)。如果聲明結(jié)束時(shí)四個(gè)屬性值還剩一個(gè)沒(méi)指定，沒(méi)有指定的一邊會(huì)取其對(duì)邊的值。指定三個(gè)值時(shí)，左邊和右邊都會(huì)使用第二個(gè)值。指定兩個(gè)值時(shí)，上邊和下邊會(huì)使用第一個(gè)值。如果只指定一個(gè)值，那么四個(gè)方向都會(huì)使用這個(gè)值。因此下面的聲明都是等價(jià)的。

padding: 1em 2em; 
padding: 1em 2em 1em; 
padding: 1em 2em 1em 2em;

下面的聲明也是等價(jià)的。

padding: 1em; 
padding: 1em 1em; 
padding: 1em 1em 1em; 
padding: 1em 1em 1em 1em;

對(duì)很多開(kāi)發(fā)人員而言，比較難的是指定三個(gè)值時(shí)。記住，這種情況指定了上、右、下的值。因?yàn)闆](méi)有指定左邊的值，所以它會(huì)取與右邊相等的值。第二個(gè)值就會(huì)作用到左邊和右邊。因此 padding: 10px 15px 0 是設(shè)置左右內(nèi)邊距為15px，上內(nèi)邊距為10px，下內(nèi)邊距為0。

不過(guò)，大多數(shù)情況只需要指定兩個(gè)值。尤其對(duì)于較小的元素，左右的內(nèi)邊距最好大于上下內(nèi)邊距。這種樣式很適合網(wǎng)頁(yè)的按鈕或者導(dǎo)航鏈接,如下圖所示。

.nav a { 
  color: white; 
  background-color: #13a4a4; 
  padding: 5px 15px;            /* 上下內(nèi)邊距，然后是左右內(nèi)邊距 */ 
  border-radius: 2px; 
  text-decoration: none; 
}

它使用簡(jiǎn)寫(xiě)屬性先給垂直方向加上內(nèi)邊距，再給水平方向加上內(nèi)邊距。

因?yàn)楹芏鄬傩宰裱@個(gè)，所以最好記住它。

2. 水平、垂直

“TRouBLe”口訣只適用于分別給盒子設(shè)置四個(gè)方向的值的屬性。還有一些屬性只支持最多指定兩個(gè)值，這些屬性包括 background-position、box-shadow、text-shadow(雖然嚴(yán)格來(lái)講它們并不是簡(jiǎn)寫(xiě)屬性)。這些屬性值的順序跟padding這種四值屬性的順序剛好相反。比如，padding: 1em 2em 先指定了垂直方向的上/下屬性值，然后才是水平方向的右/左屬性值，而 background-position: 25% 75% 則先指定水平方向的右/左屬性值，然后才是垂直方向的上/下屬性值。

雖然看起來(lái)順序相反的定義違背了直覺(jué)，原因卻很簡(jiǎn)單：這兩個(gè)值代表了一個(gè)笛卡兒網(wǎng)格。笛卡兒網(wǎng)格的測(cè)量值一般是按照x，y(水平，垂直)的順序來(lái)的。比如，如圖1-15所示，要給元素加上一個(gè)陰影，就要先指定x(水平)值。

.nav .featured{ 
  background-color: orange; 
  box-shadow: 10px 2px #6f9090; /* 陰影向右偏移10px，向下偏移2px */ 
}

<div class="nav"> 
  <a href="#">Home</a> 
  <a href="#">Coffees</a> 
  <a href="#">Brewers</a> 
  <a href="#" class="featured">Specials</a> 
</div>

第一個(gè)(較大的)值指定了水平方向的偏移量，第二個(gè)(較小的)值指定了垂直方向的偏移量。

如果屬性需要指定從一個(gè)點(diǎn)出發(fā)的兩個(gè)方向的值，就想想“笛卡兒網(wǎng)格”。如果屬性需要指定一個(gè)元素四個(gè)方向的值，就想想“時(shí)鐘”。

總結(jié)

到此這篇關(guān)于CSS中簡(jiǎn)寫(xiě)屬性要注意TRouBLe的順序(避免踩坑)的文章就介紹到這了,更多相關(guān)css簡(jiǎn)寫(xiě)屬性要注意TRouBLe的順序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！