分類(lèi)導(dǎo)航

探究負(fù)邊距（negative margin）原理

發(fā)布時(shí)間：2016年11月03日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來(lái)自筆記，點(diǎn)擊查看原文)

W3C規(guī)范在介紹margin時(shí)有這樣一句話：

Negative values for margin properties are allowed, but there may be implementation-specific limits.

于是，聰明的開(kāi)發(fā)者們就發(fā)現(xiàn)了很多負(fù)邊距的巧妙用法。

比如，他可以增加一個(gè)不定寬塊框的寬度，他可以讓一個(gè)框向上移動(dòng)去覆蓋另一個(gè)框，他可以讓文字移動(dòng)去覆蓋文字，也可以讓浮動(dòng)框移動(dòng)去覆蓋另一個(gè)浮動(dòng)框。

利用這些特點(diǎn)，我們可以實(shí)現(xiàn)圣杯布局和雙飛翼布局、等高布局、多列布局等等實(shí)用的布局方式。

那么負(fù)邊距到底是如何工作的呢？也就是說(shuō)，這些現(xiàn)象要怎么解釋?zhuān)?

我是這樣理解的：

在可視化格式模型中，一切都是框。所有的框都處于流動(dòng)狀態(tài)。就像是一個(gè)個(gè)漂浮在水上的小木塊兒，水會(huì)將他們往一個(gè)地方推。

而邊距，就是用于截流。就像是將一條河截成兩段之后，后一段的水流就無(wú)法影響到前一段水流中的小木塊了兒。

普通流（normal flow）：

普通流中有塊級(jí)格式化上下文和行內(nèi)級(jí)格式化上下文。

在塊級(jí)格式化上下文中，塊級(jí)框占滿一行，從上到下依次排列。占滿一行意味著，如果他沒(méi)有被設(shè)置寬度的話，他就會(huì)橫向填充滿整個(gè)包含框。

所以，塊級(jí)格式化上下文中的流應(yīng)該是這樣的：

所以，給第一個(gè)p元素設(shè)置margin-bottom:10px;的意思就是在第一個(gè)p元素的border-bottom邊線下10px的位置，設(shè)置一條攔截線，阻止之后的框被水流沖過(guò)這條線。

而如果設(shè)置margin-bottom:-10px的話，攔截線就會(huì)被設(shè)置在第一段文字border-bottom邊線上10px的位置，之后的框會(huì)從那里開(kāi)始流動(dòng)，也就是會(huì)覆蓋住第一段文字10px。按照這個(gè)邏輯，在這個(gè)例子中，給第一段文字設(shè)置margin-bottom:-10px和給的二段文字設(shè)置margin-top:-10px的效果是相同的，因?yàn)樗麄兌及褦r截線設(shè)置在了同一個(gè)地方。

分類(lèi)導(dǎo)航

探究負(fù)邊距（negative margin）原理

普通流（normal flow）：

延伸閱讀

我想了解如何學(xué)習(xí)