基于CSS盒子模型的Margin屬性研究

黃雪琴　耿強(qiáng)

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

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

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）13-2977-02

1 概述

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

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

2 設(shè)置margin屬性值

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

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

margin的屬性設(shè)置除了可以使用簡(jiǎn)寫(xiě)方法外，也可以用具體的屬性名稱(chēng)來(lái)設(shè)置某一個(gè)具體方向的margin值，有margin-bottom（下邊界）、margin-left（左邊界）、margin-right（右邊界）和margin-top（上邊界）。例如margin-bottom：20px，表示上邊界值為20px。

3 margin特性分析

3.1 合并的特性

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

當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有padding或border把邊界分隔開(kāi)），它們的上下邊界也會(huì)發(fā)生合并。

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

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

圖1 空元素邊界合并

3.2 負(fù)margin的特性

1）static元素的負(fù)margin

負(fù)margin對(duì)static元素的作用是，會(huì)使它們?cè)跇?biāo)準(zhǔn)流中的位置發(fā)生偏移，并且放棄偏移前占據(jù)的空間，這樣它后面標(biāo)準(zhǔn)流中的其它元素就會(huì)被“拉”過(guò)來(lái)填充這部分空間。這種偏移不同于相對(duì)定位，通過(guò)相對(duì)定位偏移后，其仍然會(huì)堅(jiān)守著它原來(lái)占據(jù)的空間，不會(huì)讓標(biāo)準(zhǔn)流的其它元素乘虛而入。

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

對(duì)類(lèi)wrap、類(lèi)box1與類(lèi)box2的css設(shè)置代碼如下：

.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負(fù)值作用后效果圖 圖3 不同方位的margin負(fù)值產(chǎn)生的效果

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

當(dāng)static元素的margin四個(gè)值都為正值的話，那么margin按照正常邏輯同周?chē)禺a(chǎn)生邊距。從實(shí)例中可以看出，當(dāng)static元素margin的top和left是負(fù)值時(shí)會(huì)引起元素的向上或向左位置移動(dòng)。而當(dāng)元素margin的bottom和right是負(fù)值時(shí)會(huì)影響右邊和下邊相鄰元素，把它們“拉”過(guò)來(lái)發(fā)生了負(fù)值大小的空間重疊。

當(dāng)static元素的margin設(shè)置為負(fù)值時(shí)，不同方位的margin負(fù)值產(chǎn)生的效果如圖3示。

2）float元素的負(fù)margin

負(fù)margin對(duì)浮動(dòng)元素的影響與負(fù)margin對(duì)static元素的影響其實(shí)是差不多的。標(biāo)準(zhǔn)流中元素的位置由標(biāo)準(zhǔn)流的走向決定，浮動(dòng)的元素也可以看成有一個(gè)“浮動(dòng)流”存在，不過(guò)浮動(dòng)流既可以向左，也可以向右。

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

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

圖4 左浮動(dòng)top、left為負(fù)值 圖5 右浮動(dòng)的top、left為負(fù)值

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

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

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

圖6 右浮動(dòng)的top、right為負(fù)值 圖7 box3的margin-right為-240px

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

當(dāng)static元素的margin設(shè)置為負(fù)值時(shí)，不同方位的margin負(fù)值產(chǎn)生的效果如圖3示。

2）float元素的負(fù)margin

負(fù)margin對(duì)浮動(dòng)元素的影響與負(fù)margin對(duì)static元素的影響其實(shí)是差不多的。標(biāo)準(zhǔn)流中元素的位置由標(biāo)準(zhǔn)流的走向決定，浮動(dòng)的元素也可以看成有一個(gè)“浮動(dòng)流”存在，不過(guò)浮動(dòng)流既可以向左，也可以向右。

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

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

圖4 左浮動(dòng)top、left為負(fù)值 圖5 右浮動(dòng)的top、left為負(fù)值

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

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

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

圖6 右浮動(dòng)的top、right為負(fù)值 圖7 box3的margin-right為-240px

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

當(dāng)static元素的margin設(shè)置為負(fù)值時(shí)，不同方位的margin負(fù)值產(chǎn)生的效果如圖3示。

2）float元素的負(fù)margin

負(fù)margin對(duì)浮動(dòng)元素的影響與負(fù)margin對(duì)static元素的影響其實(shí)是差不多的。標(biāo)準(zhǔn)流中元素的位置由標(biāo)準(zhǔn)流的走向決定，浮動(dòng)的元素也可以看成有一個(gè)“浮動(dòng)流”存在，不過(guò)浮動(dòng)流既可以向左，也可以向右。

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

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

圖4 左浮動(dòng)top、left為負(fù)值 圖5 右浮動(dòng)的top、left為負(fù)值

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

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

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

圖6 右浮動(dòng)的top、right為負(fù)值 圖7 box3的margin-right為-240px

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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