CSS中margin參數(shù)省略原則是什么

這篇文章給大家介紹CSS中margin參數(shù)省略原則是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

CSS中margin參數(shù)省略的原則

使用margin屬性是用來設(shè)置對象四邊的外邊距，如果提供全部四個(gè)參數(shù)，將按上-右-下-左的順序作用于四邊，即：

margin：{toprightbottomleft;}

記住這個(gè)模式的好的途徑是：這4個(gè)值從元素頂端開始，順時(shí)針圍繞元素。值總是按照這個(gè)順序被使用，因此若想得到預(yù)期的效果，必須正確地排序它們。

為什么會省略？

有時(shí)，為margin輸入的值有些重復(fù)：

p{margin：0.25em1em0.25em1em;}

為了那些懶人少輸入這些煩人的代碼(不知道這是否是初衷，但肯定有這樣的懶人)，或許更實(shí)際的些是為了減小CSS文件的字節(jié)數(shù)，以減小帶寬占用，節(jié)省經(jīng)濟(jì)支出，w3c的成員們想出了更簡單的替代方法，不必這樣重復(fù)輸入一對值，可以用下面的標(biāo)記來代替它：

p{margin:0.25em1em;}

這樣的兩個(gè)值足以代替那四個(gè)值，是怎么做的呢？

省略原則

CSS定義了幾個(gè)步驟以接收少于四個(gè)的margin參數(shù)：

1.如果沒有l(wèi)eft值，則使用right代替。

2.如果沒有bottom值，則使用top代替。

3.如果沒有right值，則使用top值代替。

換句話來說，如果給margin賦了三個(gè)值，則第四個(gè)（left）由復(fù)制第二個(gè)（right）得到。如果給出了兩個(gè)，則第四個(gè)由復(fù)制第二個(gè)得到，第三個(gè)（bottom）由復(fù)制***個(gè)（top）得到。***，如果只給出了一個(gè)值，那么將被復(fù)制到其他三個(gè)。

假如更喜歡直觀的說明，請看如下所示的圖解。

舉三個(gè)例子你應(yīng)該更加清楚了：

1.b{margin:10px;}和b{margin:10px10px10px10px;}是等價(jià)的；

2.b{margin:10px5px;}和b{margin:10px5px10px5px;}是等價(jià)的；

3.b{margin:5px3px4px;}和b{margin:5px3px4px3px;}是等價(jià)的；

有了這些原則的指引之后，我想你在編寫CSS的時(shí)候頭腦中對于margin屬性中參數(shù)的省略的思路應(yīng)該更加清晰了吧！

關(guān)于CSS中margin參數(shù)省略原則是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。