陳桂霞

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

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

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

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

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

1 CSS盒模型概念

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

圖1 盒模型示意圖

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

2 CSS盒模型中的margin屬性

margin屬性應(yīng)用于盒子外面的空間，或者是位于盒子和瀏覽器窗口之間的區(qū)域，又或者是位于盒子和文檔中其他元素之間的區(qū)域。表一顯示了各種margin屬性。margin屬性是margin-top、margin-right、margin-bottom和margin-left四個(gè)單獨(dú)屬性的簡(jiǎn)寫(xiě)屬性。值得注意的是盒模型簡(jiǎn)寫(xiě)屬性總是以順時(shí)針?lè)较蛑付?，從top開(kāi)始： top、right、bottom和left。

2.1 margin 的基本寫(xiě)法

表達(dá)式：margin：top right bottom left；

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

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

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

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

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

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

例如：margin：50px 100px；這個(gè)語(yǔ)句等同于

margin：50px 100px 50px 100px；

margin：50px；這個(gè)語(yǔ)句等同于

margin：50px 50px 50px 50px；

2.2 margin 邊界折疊問(wèn)題

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

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

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

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

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

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

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)線垂直向下移動(dòng)；left 以盒模型的左邊線為基準(zhǔn)線水平向右移動(dòng)。right以盒模型本身的border-right為基準(zhǔn)線水平向右移動(dòng)；bottom以盒模型本身的 border-bottom為基準(zhǔn)線垂直向下移動(dòng)。

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

例如：body{

width：600px；

margin：1em auto；}

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

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

參考文獻(xiàn)：

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

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

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

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