基于CSS盒模型中的margin屬性解析

陳桂霞

摘要：因特網(wǎng)的迅速發(fā)展使得HTML 排版界面效果的局限性日益明顯。DIV+CSS解決了網(wǎng)頁界面布局的難題，成為當(dāng)前網(wǎng)頁布局方式中的主流技術(shù)。而CSS盒模型更是這一技術(shù)中的重要概念，在CSS盒模型的屬性中，margin屬性尤為重要，它幾乎可以設(shè)置在任何元素上，在使用的時候也容易出現(xiàn)一些問題，本文將通過實例對margin 屬性進行詳細(xì)解析。

關(guān)鍵詞：CSS；盒模型；margin

中圖分類號：TP37 文獻標(biāo)識碼：A 文章編號：1009-3044（2016）36-0074-02

現(xiàn)在，CSS已經(jīng)發(fā)展得非常成功了，無論是在瀏覽器還是應(yīng)用商店，甚至聊天客戶端，CSS都無處不在并且沒有任何消退的跡象。CSS也叫層疊樣式表（Cascading Stylesheet），在頁面制作時采用 CSS 技術(shù)，可以控制文本的顏色、字體的樣式、段落的間距、背景的圖像顏色以及其他各種視覺效果。其主要優(yōu)勢在于，相同的CSS可以用在多個頁面上。當(dāng)CSS與HTML、XHTML結(jié)合使用時，CSS展現(xiàn)出了強大的能力。

CSS盒模型，是基于CSS的Web設(shè)計中非常重要的概念，因為盒模型是CSS定位布局的核心內(nèi)容。盒模型是針對HTML元素的一組規(guī)則，制定了元素的高度、寬度、內(nèi)邊距、邊框和外邊距是如何度量的，下面從盒模型是什么開始講起。

1 CSS盒模型概念

XMTML中大部分的元素（特別是塊狀元素），都可以看作是一個盒子，而網(wǎng)頁的元素定位實際就是這些大大小小盒子在頁面中的定位。當(dāng)某個塊狀元素被CSS設(shè)置了浮動屬性，這個盒子就會自動排到上一行。網(wǎng)頁布局即關(guān)注這些盒子在頁面中如何擺放、如何嵌套的問題。為什么要把XHTML元素作為盒模型來研究呢？因為XHTML元素的特性和盒子非常相似，盒子中的內(nèi)容到盒子的邊框之間的距離及填充（padding）；盒子本身有邊框（border）；盒子邊框外和其他盒子之間有邊界（margin），效果如圖1所示。

圖1 盒模型示意圖

大多數(shù)XHTML元素的結(jié)構(gòu)都類似于圖一所示，除了包含的內(nèi)容（文本或圖片）外，還有內(nèi)邊距、邊框和外邊距一層層的包裹。我們在布局網(wǎng)頁和定位XHTML元素時要充分地考慮這些要素才可以更加自如地擺弄這些盒子。下面我們就重點講一講盒子的外邊距margin屬性的應(yīng)用。

2 CSS盒模型中的margin屬性

margin屬性應(yīng)用于盒子外面的空間，或者是位于盒子和瀏覽器窗口之間的區(qū)域，又或者是位于盒子和文檔中其他元素之間的區(qū)域。表一顯示了各種margin屬性。margin屬性是margin-top、margin-right、margin-bottom和margin-left四個單獨屬性的簡寫屬性。值得注意的是盒模型簡寫屬性總是以順時針方向指定，從top開始： top、right、bottom和left。

2.1 margin 的基本寫法

表達式：margin：top right bottom left；

margin屬性值是數(shù)值單位，可以是長度、百分比或 auto，margin 甚至可以設(shè)為負(fù)值，造成 BOX與BOX之間的重疊顯示。

例如：margin：70px 100px 50px 100px；可以看到這個語句給相應(yīng)內(nèi)容設(shè)置了有70px上外邊距，100px的左右外邊距和50px的下外邊距的BOX。

margin 在書寫時可以省略參數(shù)，基本原則如下：

1）如果沒有l(wèi)eft值，則默認(rèn)使用right值替代；

2）如果沒有bottom值，則默認(rèn)使用top值替代；

3）如果沒有right值，則默認(rèn)使用top值替代。

例如：margin：50px 100px；這個語句等同于

margin：50px 100px 50px 100px；

margin：50px；這個語句等同于

margin：50px 50px 50px 50px；

2.2 margin 邊界折疊問題

在CSS中，當(dāng)兩個或多個BOX的上或下外邊距接觸時，會產(chǎn)生外邊距折疊。只有垂直margin會折疊，水平margin不會。相鄰兩個BOX折疊后的最終margin 值計算方法如下：

1）兩者都為正值，取值大者；

2）值有正負(fù)，兩者都取絕對值，再用正值減去最大絕對值；

3）全為負(fù)值，兩者都取絕對值，再用 0 減去最大絕對值。

如果一個子元素的外邊距直接接觸到父元素的外邊界，也會發(fā)生margin折疊。如上算法，較大的外邊距是勝利者，勝利的外邊距總是應(yīng)用到父元素，子元素的margin總是被折疊。因此，如果可以防止兩個外邊距相互接觸，那么margin折疊就可以避免?？梢酝ㄟ^對父元素使用內(nèi)邊距或者邊框來防止兩個外邊距接觸。

但是在一些特殊情況或是一些設(shè)置前提下，盒模型的垂直 margin不會被折疊。如果相鄰的盒模型中，其中一個是浮動的（floated），那么垂直 margin則不會被折疊，而且這個浮動盒模型的里的子元素之間也不會折疊；設(shè)置了display：inline-block 的元素，包含它的子元素，它們的垂直margin都不會被折疊；設(shè)置了絕對定位position：absolute的盒模型和它們的子元素，垂直margin不會被折疊。還有一些特殊情況下，盒模型的垂直margin也不會被折疊，這里不一一贅述。

2.3 margin的解析邏輯

在盒模型margin中，top、right、bottom、left的基準(zhǔn)線并不是統(tǒng)一的，而是分為了兩類基準(zhǔn)線，top和 left的基準(zhǔn)線屬于一類，right 和 bottom 的基準(zhǔn)線屬于另一類。top 以盒模型的上邊線為基準(zhǔn)線垂直向下移動；left 以盒模型的左邊線為基準(zhǔn)線水平向右移動。right以盒模型本身的border-right為基準(zhǔn)線水平向右移動；bottom以盒模型本身的 border-bottom為基準(zhǔn)線垂直向下移動。

margin屬性的這個特點常常被用來水平對齊元素。我們可以通過結(jié)合auto關(guān)鍵字和盒子元素的左或右外邊距來對齊文檔中的元素。

例如：body{

width：600px；

margin：1em auto；}

這個示例中，設(shè)置了body元素的margin屬性，將上下外邊距設(shè)為1em，將左右外邊距設(shè)為auto。使用一個寬度值后，這種設(shè)置的結(jié)果是使文檔的正文居中顯示。一個盒模型在水平方向上所占的寬度，是由margin、 width和padding的值決定，值得注意的是：這些值中， margin-left、margin-right 和width可以設(shè)為 auto，如果將margin-top、margin-bottom設(shè)置為auto，則會被系統(tǒng)忽略，我們可以將auto理解為：彌補其他部分與所要求總合之間的差別。

CSS 盒模型是 CSS 網(wǎng)頁布局技術(shù)中一個基礎(chǔ)又非常重要的概念，深刻理解盒模型的結(jié)構(gòu)對于進一步掌握CSS技術(shù)有著重要的意義。而CSS盒模型中的margin屬性在網(wǎng)頁布局中有著舉足輕重的地位，如何讓網(wǎng)頁設(shè)計更合理，首先應(yīng)該掌握CSS盒模型的margin屬性。我們在今后的實踐中會不斷嘗試和探索，去發(fā)掘CSS盒模型更大的用途和魅力。

參考文獻：

[1]Lan Pouncey， Richard Youk.CSS入門經(jīng)典[M].3版.北京：清華大學(xué)出版社，2012.

[2]Andy Clarke.超越CSS：Web設(shè)計藝術(shù)精髓[M].北京：人民郵電出版社，2012.

[3]巴德.精通 CSS：高級Web標(biāo)準(zhǔn)解決方案[M].北京：人民郵電出版社，2010.

[4]施密特.CSS Web設(shè)計高級教程[M].北京：清華大學(xué)出版社，2009.