W3C規(guī)范在介紹margin時有這樣一句話：
Negative values for margin properties are allowed, but there may be implementation-specific limits.
于是，聰明的開發(fā)者們就發(fā)現(xiàn)了很多負(fù)邊距的巧妙用法。
比如，他可以增加一個不定寬塊框的寬度，他可以讓一個框向上移動去覆蓋另一個框，他可以讓文字移動去覆蓋文字，也可以讓浮動框移動去覆蓋另一個浮動框。
利用這些特點，我們可以實現(xiàn)圣杯布局和雙飛翼布局、等高布局、多列布局等等實用的布局方式。
那么負(fù)邊距到底是如何工作的呢？也就是說，這些現(xiàn)象要怎么解釋？
我是這樣理解的：
在可視化格式模型中，一切都是框。所有的框都處于流動狀態(tài)。就像是一個個漂浮在水上的小木塊兒，水會將他們往一個地方推。
而邊距，就是用于截流。就像是將一條河截成兩段之后，后一段的水流就無法影響到前一段水流中的小木塊了兒。
普通流（normal flow）：
普通流中有塊級格式化上下文和行內(nèi)級格式化上下文。
在塊級格式化上下文中，塊級框占滿一行，從上到下依次排列。占滿一行意味著，如果他沒有被設(shè)置寬度的話，他就會橫向填充滿整個包含框。
所以，塊級格式化上下文中的流應(yīng)該是這樣的：
所以，給第一個p元素設(shè)置margin-bottom:10px;的意思就是在第一個p元素的border-bottom邊線下10px的位置，設(shè)置一條攔截線，阻止之后的框被水流沖過這條線。
而如果設(shè)置margin-bottom:-10px的話，攔截線就會被設(shè)置在第一段文字border-bottom邊線上10px的位置，之后的框會從那里開始流動，也就是會覆蓋住第一段文字10px。按照這個邏輯，在這個例子中，給第一段文字設(shè)置margin-bottom:-10px和給的二段文字設(shè)置margin-top:-10px的效果是相同的，因為他們都把攔截線設(shè)置在了同一個地方。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式