新聞中心
這篇文章給大家介紹CSS中margin參數(shù)省略原則是什么,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
為西林等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及西林網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、西林網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
CSS中margin參數(shù)省略的原則
使用margin屬性是用來設(shè)置對象四邊的外邊距,如果提供全部四個參數(shù),將按上-右-下-左的順序作用于四邊,即:
margin:{toprightbottomleft;}記住這個模式的好的途徑是:這4個值從元素頂端開始,順時針圍繞元素。值總是按照這個順序被使用,因此若想得到預(yù)期的效果,必須正確地排序它們。
為什么會省略?
有時,為margin輸入的值有些重復(fù):
p{margin:0.25em1em0.25em1em;}為了那些懶人少輸入這些煩人的代碼(不知道這是否是初衷,但肯定有這樣的懶人),或許更實(shí)際的些是為了減小CSS文件的字節(jié)數(shù),以減小帶寬占用,節(jié)省經(jīng)濟(jì)支出,w3c的成員們想出了更簡單的替代方法,不必這樣重復(fù)輸入一對值,可以用下面的標(biāo)記來代替它:
p{margin:0.25em1em;}這樣的兩個值足以代替那四個值,是怎么做的呢?
省略原則
CSS定義了幾個步驟以接收少于四個的margin參數(shù):
1.如果沒有l(wèi)eft值,則使用right代替。
2.如果沒有bottom值,則使用top代替。
3.如果沒有right值,則使用top值代替。
換句話來說,如果給margin賦了三個值,則第四個(left)由復(fù)制第二個(right)得到。如果給出了兩個,則第四個由復(fù)制第二個得到,第三個(bottom)由復(fù)制***個(top)得到。***,如果只給出了一個值,那么將被復(fù)制到其他三個。
假如更喜歡直觀的說明,請看如下所示的圖解。

舉三個例子你應(yīng)該更加清楚了:
1.b{margin:10px;}和b{margin:10px10px10px10px;}是等價的;
2.b{margin:10px5px;}和b{margin:10px5px10px5px;}是等價的;
3.b{margin:5px3px4px;}和b{margin:5px3px4px3px;}是等價的;
有了這些原則的指引之后,我想你在編寫CSS的時候頭腦中對于margin屬性中參數(shù)的省略的思路應(yīng)該更加清晰了吧!
關(guān)于CSS中margin參數(shù)省略原則是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
網(wǎng)站標(biāo)題:CSS中margin參數(shù)省略原則是什么
分享URL:http://www.dlmjj.cn/article/jsosps.html


咨詢
建站咨詢
