溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹CSS中margin參數省略原則是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
CSS中margin參數省略的原則
使用margin屬性是用來設置對象四邊的外邊距，如果提供全部四個參數，將按上-右-下-左的順序作用于四邊，即：
margin：{toprightbottomleft;}記住這個模式的好的途徑是：這4個值從元素頂端開始，順時針圍繞元素。值總是按照這個順序被使用，因此若想得到預期的效果，必須正確地排序它們。
為什么會省略？
有時，為margin輸入的值有些重復：
p{margin：0.25em1em0.25em1em;}為了那些懶人少輸入這些煩人的代碼(不知道這是否是初衷，但肯定有這樣的懶人)，或許更實際的些是為了減小CSS文件的字節數，以減小帶寬占用，節省經濟支出，w3c的成員們想出了更簡單的替代方法，不必這樣重復輸入一對值，可以用下面的標記來代替它：
p{margin:0.25em1em;}這樣的兩個值足以代替那四個值，是怎么做的呢？
省略原則
CSS定義了幾個步驟以接收少于四個的margin參數：
1.如果沒有left值，則使用right代替。
2.如果沒有bottom值，則使用top代替。
3.如果沒有right值，則使用top值代替。
換句話來說，如果給margin賦了三個值，則第四個（left）由復制第二個（right）得到。如果給出了兩個，則第四個由復制第二個得到，第三個（bottom）由復制***個（top）得到。***，如果只給出了一個值，那么將被復制到其他三個。
假如更喜歡直觀的說明，請看如下所示的圖解。
舉三個例子你應該更加清楚了：
1.b{margin:10px;}和b{margin:10px10px10px10px;}是等價的；
2.b{margin:10px5px;}和b{margin:10px5px10px5px;}是等價的；
3.b{margin:5px3px4px;}和b{margin:5px3px4px3px;}是等價的；
有了這些原則的指引之后，我想你在編寫CSS的時候頭腦中對于margin屬性中參數的省略的思路應該更加清晰了吧！
關于CSS中margin參數省略原則是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
