黃雪琴　耿強

摘要：在CSS各類屬性中，Margin是一個非常重要的屬性，在頁面的自適應寬度布局、圖片與文字的對齊等更多的頁面細節(jié)處理上，一般都采用Margin屬性來實現(xiàn)。深入了解Margin屬性，對于應用CSS技術(shù)精確定位網(wǎng)頁中的各個元素，實現(xiàn)網(wǎng)頁的一些高級應用和設計，都有著重要的實踐意義。

關(guān)鍵詞：負Margin；邊界合并；float元素；static元素；位移

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2014）13-2977-02

1 概述

在CSS中，一個盒子模型由內(nèi)至外有content（內(nèi)容），padding（填充）， border（邊框）和margin（邊界）這4個部分組成。其中margin（邊界）用于控制盒子與盒子之間的距離，是透明的，不能為其添加背景色，因此不會遮擋其后的任何元素。

margin屬性不僅可以控制盒子與盒子之間的距離，同時對margin在不同情況下進行正值或負值設置，會產(chǎn)生一些不僅僅是盒子外邊距的效果，還可以是“塌陷”或“位移”、“騰位”等效果。

2 設置margin屬性值

margin屬性可以設置一個或多個屬性值，用于設置四個邊的邊界。

設置1個屬性值時，表示上下左右4個margin均為該值；設置2個屬性值時，前者表示上下邊界的值，后者表示左右邊界的值。如：margin：20px 30px，表示設置了某盒子的上下邊界為20px，左右邊界為30px；設置3個屬性值時，第1個數(shù)值表示上邊界值，第2個表示左右邊界的值，第3個表示下邊界值；設置4個屬性值時，按照順時針方向，依次為上右下左邊界的值。

margin的屬性設置除了可以使用簡寫方法外，也可以用具體的屬性名稱來設置某一個具體方向的margin值，有margin-bottom（下邊界）、margin-left（左邊界）、margin-right（右邊界）和margin-top（上邊界）。例如margin-bottom：20px，表示上邊界值為20px。

3 margin特性分析

3.1 合并的特性

邊界合并是一個相當簡單的概念，合并后邊界的高度等于兩個發(fā)生合并的邊界高度中的較大者。例如當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下邊界與第二個元素的上邊界會發(fā)生合并。發(fā)生合并時，是等于兩個邊界值中最大的值。

當一個元素包含在另一個元素中時（假設沒有padding或border把邊界分隔開），它們的上下邊界也會發(fā)生合并。

CSS盒子模型邊界甚至可以與自身發(fā)生合并。假設有一個空元素，它有邊界，但是沒有border或padding。在這種情況下，上邊界與下邊界就碰到了一起，它們會發(fā)生合并，如圖1所示。

如果這個空元素的邊界遇到另一個元素的邊界，邊界還會發(fā)生合并。只有普通標準流中塊級元素的垂直邊界才會發(fā)生邊界合并。行內(nèi)元素、浮動盒子或絕對定位之間的盒子的邊界是不會合并。

圖1 空元素邊界合并

3.2 負margin的特性

1）static元素的負margin

負margin對static元素的作用是，會使它們在標準流中的位置發(fā)生偏移，并且放棄偏移前占據(jù)的空間，這樣它后面標準流中的其它元素就會被“拉”過來填充這部分空間。這種偏移不同于相對定位，通過相對定位偏移后，其仍然會堅守著它原來占據(jù)的空間，不會讓標準流的其它元素乘虛而入。

這里看一個簡單的實例，在一個頁面中有三個div，它們的關(guān)系如下代碼所示：

對類wrap、類box1與類box2的css設置代碼如下：

.wrap {width：200px； height：200px； border：3px solid #F00；margin：0px auto；}

.box1{width：80px；height：100px；background：#CCCCFF；text-align： center；}

.box2{width：80px；height：100px；background：#CCE8CF；text-align： center；}

圖2 margin負值作用后效果圖 圖3 不同方位的margin負值產(chǎn)生的效果

給類box1添加負margin屬性，具體代碼如margin：-10px 0px -30px -10px，這時頁面顯示的效果如圖2所示。此時可以清楚的看到，“位移元素”已經(jīng)向上并向左產(chǎn)生了一定數(shù)值的偏移。

當static元素的margin四個值都為正值的話，那么margin按照正常邏輯同周圍元素產(chǎn)生邊距。從實例中可以看出，當static元素margin的top和left是負值時會引起元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素，把它們“拉”過來發(fā)生了負值大小的空間重疊。

當static元素的margin設置為負值時，不同方位的margin負值產(chǎn)生的效果如圖3示。

2）float元素的負margin

負margin對浮動元素的影響與負margin對static元素的影響其實是差不多的。標準流中元素的位置由標準流的走向決定，浮動的元素也可以看成有一個“浮動流”存在，不過浮動流既可以向左，也可以向右。

根據(jù)以上static的負margin屬性案例，這里給“位移元素”添加一個兄弟“參考元素2”的塊元素，應用的類box3與類box2的設置一樣。具體的關(guān)系代碼如下：

給三個子div添加上左浮動的屬性float：left，在瀏覽器中顯示的效果是三個框并排緊挨著。這時，給box1添加margin屬性（margin-top：-10px； margin-left：-20px； ），在瀏覽器顯示效果如圖4所示。此時，margin的top和left是負值時會引起元素的向上或向左位置移動。如果將所有子div的左浮動都修改為右浮動：float：right，在瀏覽器顯示效果如圖5所示。此時，margin的left是負值不會引起位移，而是“騰位”后“拉”了相鄰的元素過來發(fā)生重疊。

圖4 左浮動top、left為負值 圖5 右浮動的top、left為負值

在三個子div都設置了右浮動的情況下，再次修改box1的margin，將margin-left的屬性去掉，添加上margin-right：-20px，顯示效果如圖6所示。此時對于右浮動的“位移元素”，margin的right負值是向右位移的作用，top的負值依然保持著向上位移的作用。

再此基礎(chǔ)上，再給類box3添加margin屬性（margin-right：：-240px；），這時可以看到，“參考元素2”在代碼中是最后一位的塊元素，但通過margin屬性的負值設置，完全位移到了“位移元素”的前面，如圖7所示。這個原理在圣杯布局、雙飛翼布局中都有使用。

Margin屬性研究-DD＼image7.png>

圖6 右浮動的top、right為負值 圖7 box3的margin-right為-240px

根據(jù)案例分析可得知，float元素的負margin根據(jù)“浮動流”的方向，將不同方位的margin值產(chǎn)生的作用效果重新定義，但具體的作用效果與對static元素在標準流的作用效果是相似的。

4 結(jié)束語

在頁面的自適應寬度布局、圖片與文字的對齊問題、隱藏首末邊框等細節(jié)處理上，一般都采用了負margin來實現(xiàn)。負margin不但可以做出一般CSS屬性所不能達到的效果，還能解決一些較為疑難的網(wǎng)頁布局問題。

參考文獻：

[1] 車元媛.基于CSS+DIV的網(wǎng)頁布局技術(shù)應用[J].電腦知識與技術(shù)，2011（9）.

[2] 曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007（8）.

[3] 殷衛(wèi)莉.基于CSS盒子模型的margin屬性解析[J].揚州教育學院學報，2009（9）.

[4] 溫謙.CSS設計徹底研究[M].北京：人民郵電出版社，2008.

當static元素的margin設置為負值時，不同方位的margin負值產(chǎn)生的效果如圖3示。

2）float元素的負margin

負margin對浮動元素的影響與負margin對static元素的影響其實是差不多的。標準流中元素的位置由標準流的走向決定，浮動的元素也可以看成有一個“浮動流”存在，不過浮動流既可以向左，也可以向右。

根據(jù)以上static的負margin屬性案例，這里給“位移元素”添加一個兄弟“參考元素2”的塊元素，應用的類box3與類box2的設置一樣。具體的關(guān)系代碼如下：

給三個子div添加上左浮動的屬性float：left，在瀏覽器中顯示的效果是三個框并排緊挨著。這時，給box1添加margin屬性（margin-top：-10px； margin-left：-20px； ），在瀏覽器顯示效果如圖4所示。此時，margin的top和left是負值時會引起元素的向上或向左位置移動。如果將所有子div的左浮動都修改為右浮動：float：right，在瀏覽器顯示效果如圖5所示。此時，margin的left是負值不會引起位移，而是“騰位”后“拉”了相鄰的元素過來發(fā)生重疊。

圖4 左浮動top、left為負值 圖5 右浮動的top、left為負值

在三個子div都設置了右浮動的情況下，再次修改box1的margin，將margin-left的屬性去掉，添加上margin-right：-20px，顯示效果如圖6所示。此時對于右浮動的“位移元素”，margin的right負值是向右位移的作用，top的負值依然保持著向上位移的作用。

再此基礎(chǔ)上，再給類box3添加margin屬性（margin-right：：-240px；），這時可以看到，“參考元素2”在代碼中是最后一位的塊元素，但通過margin屬性的負值設置，完全位移到了“位移元素”的前面，如圖7所示。這個原理在圣杯布局、雙飛翼布局中都有使用。

Margin屬性研究-DD＼image7.png>

圖6 右浮動的top、right為負值 圖7 box3的margin-right為-240px

根據(jù)案例分析可得知，float元素的負margin根據(jù)“浮動流”的方向，將不同方位的margin值產(chǎn)生的作用效果重新定義，但具體的作用效果與對static元素在標準流的作用效果是相似的。

4 結(jié)束語

在頁面的自適應寬度布局、圖片與文字的對齊問題、隱藏首末邊框等細節(jié)處理上，一般都采用了負margin來實現(xiàn)。負margin不但可以做出一般CSS屬性所不能達到的效果，還能解決一些較為疑難的網(wǎng)頁布局問題。

參考文獻：

[1] 車元媛.基于CSS+DIV的網(wǎng)頁布局技術(shù)應用[J].電腦知識與技術(shù)，2011（9）.

[2] 曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007（8）.

[3] 殷衛(wèi)莉.基于CSS盒子模型的margin屬性解析[J].揚州教育學院學報，2009（9）.

[4] 溫謙.CSS設計徹底研究[M].北京：人民郵電出版社，2008.

當static元素的margin設置為負值時，不同方位的margin負值產(chǎn)生的效果如圖3示。

2）float元素的負margin

負margin對浮動元素的影響與負margin對static元素的影響其實是差不多的。標準流中元素的位置由標準流的走向決定，浮動的元素也可以看成有一個“浮動流”存在，不過浮動流既可以向左，也可以向右。

根據(jù)以上static的負margin屬性案例，這里給“位移元素”添加一個兄弟“參考元素2”的塊元素，應用的類box3與類box2的設置一樣。具體的關(guān)系代碼如下：

給三個子div添加上左浮動的屬性float：left，在瀏覽器中顯示的效果是三個框并排緊挨著。這時，給box1添加margin屬性（margin-top：-10px； margin-left：-20px； ），在瀏覽器顯示效果如圖4所示。此時，margin的top和left是負值時會引起元素的向上或向左位置移動。如果將所有子div的左浮動都修改為右浮動：float：right，在瀏覽器顯示效果如圖5所示。此時，margin的left是負值不會引起位移，而是“騰位”后“拉”了相鄰的元素過來發(fā)生重疊。

圖4 左浮動top、left為負值 圖5 右浮動的top、left為負值

在三個子div都設置了右浮動的情況下，再次修改box1的margin，將margin-left的屬性去掉，添加上margin-right：-20px，顯示效果如圖6所示。此時對于右浮動的“位移元素”，margin的right負值是向右位移的作用，top的負值依然保持著向上位移的作用。

再此基礎(chǔ)上，再給類box3添加margin屬性（margin-right：：-240px；），這時可以看到，“參考元素2”在代碼中是最后一位的塊元素，但通過margin屬性的負值設置，完全位移到了“位移元素”的前面，如圖7所示。這個原理在圣杯布局、雙飛翼布局中都有使用。

Margin屬性研究-DD＼image7.png>

圖6 右浮動的top、right為負值 圖7 box3的margin-right為-240px

根據(jù)案例分析可得知，float元素的負margin根據(jù)“浮動流”的方向，將不同方位的margin值產(chǎn)生的作用效果重新定義，但具體的作用效果與對static元素在標準流的作用效果是相似的。

4 結(jié)束語

在頁面的自適應寬度布局、圖片與文字的對齊問題、隱藏首末邊框等細節(jié)處理上，一般都采用了負margin來實現(xiàn)。負margin不但可以做出一般CSS屬性所不能達到的效果，還能解決一些較為疑難的網(wǎng)頁布局問題。

參考文獻：

[1] 車元媛.基于CSS+DIV的網(wǎng)頁布局技術(shù)應用[J].電腦知識與技術(shù)，2011（9）.

[2] 曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007（8）.

[3] 殷衛(wèi)莉.基于CSS盒子模型的margin屬性解析[J].揚州教育學院學報，2009（9）.

[4] 溫謙.CSS設計徹底研究[M].北京：人民郵電出版社，2008.