盒模型：外邊距疊加和外邊距為負值

盒模型乍一看很簡單，無非就是內容、內邊距、邊框和外邊距。但是寫起代碼來你會發現並不簡單，很多地方都很模糊，特別是外邊距為負值的時候。

這篇文檔主要說明兩個問題：

1.外邊距疊加

2.外邊距為負值

 

首先說明兩個基本的要點：

1.如果給元素添加背景，背景會應用於內容和內邊距組成的地區。

2.width和height是內容地區的寬度和高度。增加內邊距、邊框和外邊距不會影響內容地區的尺寸，只會增加元素框的總尺寸。

特別說明，如果將元素的box-sizing屬性設定為"border-box"，則width和height表示的是內容、內邊距和邊框組成地區的高度和寬度。所以增加外邊距對內容地區的尺寸沒有影響，而增加內邊距和邊框會導致內容地區的尺寸減小。

 

現在開始討論第一個問題：外邊距疊加

外邊距疊加是指當兩個或更多垂直外邊距相遇時，外邊距的高度等於這幾個外邊距的高度中的較大者。這就是外邊距疊加的情況，並且外邊距疊加只發生在垂直外邊距上。

外間距疊加有三種情況：

l 元素自身疊加

l 相鄰元素疊加

l 包含元素疊加

元素自身疊加

如果有一個空元素，只有外邊距而沒有邊框或內邊距，頂外邊距和底外邊距就碰到一起發生疊加。

相鄰元素疊加

當一個元素出現在另一個元素上面是，上面那個元素的底外邊距與下面那個元素的頂外邊距就會發生疊加。

包含元素疊加

當一個元素包含在另一個元素中時，如果沒有內邊距或邊框將外邊距隔開，它們的頂/底外邊距也會發生疊加。

外邊距疊加有什麼用呢？一個最簡單的例子就是段落。如果沒有外邊距疊加，那麼從第二個段落開始，段落間距就會是第一個段落上面的空間的兩倍。

最後的說明：只有普通文檔流中塊框的垂直外邊距才會發生外邊距疊加。行內框、浮動框或絕對位置框之間的外間距不會疊加。

 

接下來討論外邊距為負值的情況：

舉個具體的例子說明，假如margin-right: -150px;

分兩步理解：

1.假設margin-right: 0;，內容地區不變

 

2.此時加上margin-right: -150px;布局變成

 

所以margin-right取負值就是右邊的地區變成外邊距，以容納其他元素（假設是元素B)。需要注意的是如果不正確設定該元素中的子項目的外間距，就會與B元素髮生重疊。

外間距設定為負值主要是可以用於產生側邊欄。

 

額外說明：只有外邊距才可以是負值，內邊距不允許為負值。