CSS 中的簡寫到底有多少坑？以后不敢了...

點(diǎn)擊上方?前端陽光，關(guān)注公眾號(hào)

回復(fù)加群，加入技術(shù)交流群交流群

大家好，我是陽光，簡寫（語法糖）可能給我們編碼帶來了很多便利，但簡寫也會(huì)帶來一些問題，今天來討論一下 CSS 中的簡寫的"愛恨情仇"

為什么說是愛恨情仇呢？因?yàn)楹唽懡o我們帶來了很多的便利，但凡事都有好有壞，你不能說簡寫一點(diǎn)壞處都沒有。所以我們就聊聊簡寫的?"好"?和?"壞"

background

這個(gè) CSS 屬性大家肯定是再熟悉不過了，給元素設(shè)置背景色

是這樣？

.demo?{
??background:?#333;
}

還是這樣？

.demo?{
??background-color:?#333;
}

應(yīng)該都有吧，換作我自己，平常這兩者用哪個(gè)好像也是看心情，如果你說肯定用前者啊，因?yàn)榍罢呔鸵粋€(gè)單詞，那其實(shí)后者也不麻煩，現(xiàn)在大家都用編輯器，在智能提示的輔佐下輸入?bgc?再按回車就能打出?background:?;?了，其實(shí)也不麻煩

回到正題，其實(shí)這兩者寫法我更推薦后者，為什么？來看個(gè)例子??

<style>
??.demo?{
????background:?#333;??/*?給元素設(shè)置了背景色#333?*/
??}
??
??/*?...?中間隔了很多樣式代碼?*/

??.demo:hover?{
????background:?url("example.png");?
??}
style>

<div?class="demo"/>

這個(gè)場景很簡單：鼠標(biāo)移到元素上就展示某張照片，未加載前用一個(gè)純色占位

然而實(shí)際效果是？

為了效果明顯，我加了邊框、文字，網(wǎng)速調(diào)成?slow 3G

可以看到?hover?時(shí)的?background?覆蓋掉了前者的?background，使得效果差強(qiáng)人意

是因?yàn)榍罢吆秃笳叨际?background，所以后者自然會(huì)覆蓋前者嗎？不全是

即便我們前者用的?background-color: #333;，也仍然會(huì)被后者覆蓋

大家都知道?background?是一個(gè)語法糖，即很多屬性的簡寫 ??

那像例子中用?background: url('example.png')時(shí)，做了什么呢？

如上圖所示，它默認(rèn)把所有值都設(shè)置成了?initial，因此無論之前用到了其中哪個(gè)值都會(huì)被覆蓋，雖然?initial?設(shè)置了跟沒設(shè)置是一樣，都表示保持元素該屬性的初始值

會(huì)不會(huì)有人想說：我一直都這么用的，都沒遇到啥問題啊！

我只想說一句：可能運(yùn)氣比較好，等代碼比較復(fù)雜了，你可能會(huì)回來補(bǔ)這個(gè)窟窿的

結(jié)論：這就是一個(gè)簡寫造成的隱患，大家能避免則避免

margin

又提了一個(gè)大家再熟悉不過的屬性?margin，這里面又有啥坑呢？沒啥坑，就是想介紹一下其它用法

以下都是它的簡寫：

• margin: 10px 20px 30px 40px
• margin: 10px 20px 30px
• margin: 10px

這些簡寫確實(shí)幫我們省去了不少的代碼量

讓我們投身到一個(gè)例子??中：現(xiàn)在我想讓我的元素水平居中，我想用?margin?來實(shí)現(xiàn)

<style>
??.parent?{
????width:?300px;
????height:?300px;
????border:?1px?solid?black;
??}

??.child?{
????width:?100px;
????height:?100px;
????background-color:?red;
????margin:?auto;??/*?水平居中?*/
??}
style>

<div?class="parent">
??<div?class="child"/>
div>

效果如你所愿：

但你使用?margin: auto?時(shí)有沒有那么一瞬間想過，前面是否設(shè)置過?margin-top?或?margin-bottom?呢？比如這樣：

??