詳解css盒模型與外邊距重疊

盒模型的構成

以前寫了一篇關於如何解決css的外邊距重疊問題,但是後來發現,我有些本末倒置了,對於一個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,因此我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,爲何會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的.文章可能會有點長,爲節省時間你們能夠根據掌握的狀況瀏覽閱讀.

1.結構
爲了給文檔樹中的各個元素排版定位(佈局),瀏覽器會根據渲染模型,爲每一個元素生成四個嵌套的矩形框,他們分別是content box,padding box, border box,margin box,他們是不可分割的,並在必定狀況下會重合, 這就是css規範中所描述的盒模型,它是以CSS的角度去看一個元素被渲染後的抽象形態,是一個元素自身的構成部分.

注：padding、border 和 margin 區域都包括 top、right、bottom、left 四部分。如圖所示（"LM" 表明 left margin，"RP" 表明 right padding，"TB" 表明 top border……）。

2.邊界

上述四個區域(content, padding, border, margin)分別有他們的邊界,細化來講, 每一個區域都有top, right, bottom, left四個邊界.

• Content邊界/內邊界: content邊界環繞在由該元素的寬和高決定的一個矩形上,這個尺寸一般由該元素渲染後的內容決定,這四個content邊界組成的矩形框就是該元素的content box.

• Padding邊界:padding邊界環繞在該元素的padding區域的四周,顧名思義,填充背景色.若是padding的寬度爲零,則padding邊界與content邊界重合.這四個padding邊界組成的矩形就是該元素的padding box.

• Border邊界:border邊界環繞在該元素的border區域的四周.若是border的寬度爲零,則border邊界與padding邊界重合.這四個border邊界組成的矩形就是該元素的border box.

• Margin邊界:margin邊界環繞在該元素的margin區域的四周,若是margin的寬度爲零,則margin邊界與border邊界重合.這四個margin邊界組成的矩形就是該元素的margin box.

3.一些小的注意事項,若是你已掌握,請忽略
(1) 對於行內非替換元素(例如span),垂直方向上的margin不起做用
(2) margin不適用於table類型的元素,如table-caption,table,inline-table,以及td,th,tr等.
(3) border-style的可用值有：’none’(無樣式)，’hidden’(隱藏)，’dotted’(點線)，’dashed’(虛線)，’solid’(實線)，’double’(雙線)，’groove’(3D凹槽輪廓)，’ridge’(3D吐槽輪廓)，’inset’(3D凹邊輪廓), 'outset'(3D凸邊輪廓).後四項不多用到,因此在此提一下,你們能夠嘗試本身運行下,看看他們之間的區別.

外邊距重疊

這個也是我這篇文章要重點介紹的.
Collapsing margins,即外邊距重疊,指的是毗鄰的兩個或多個普通流中的塊元素垂直方向山的外邊距會合併爲一個外邊距.

其中所說的margin毗鄰能夠歸結爲如下兩點:

• 這兩個或多個邊距沒有被非空內容,padding,border或clear分隔開

• 這些margin都處於普通文檔流中
  注意一點,在沒有被分割開的狀況下,一個元素的margin-top回和它普通流的第一個元素的margin-top相鄰,只有在一個元素的height是'auto'的狀況下,他的margin-bottom纔會和它普通流中的最後一個元素(非浮動元素等)的margin-bottom相鄰.

示例代碼:

<div style="border:1px solid red; width:100px;">
    <div style="margin:50px 0; background-color:green; height:50px; width:50px;" class="C">
       <div style="margin:20px 0;">
           <div style="margin:100px 0;">B</div>
       </div>
    </div>
</div>

效果圖:

由於.C這個div的高度不是auto,因此他的margin-bottom和他的子元素B的margin-bottom不相鄰,所以,不會發生重疊,依然只有50px;

摺疊後margin的計算
1.參與摺疊的margin都是正值
例子:

<div style="height:50px; **margin-bottom:50px;** width:50px; background-color: red;">A</div>
<div style="height:50px; **margin-top:100px;** width:50px; background-color: green;">B</div>

在 margin 都是正數的狀況下，取其中 margin 較大的值爲最終 margin 值.

示意圖:

2.參與摺疊的margin都是負值
例子:

<div style="height:50px; **margin-bottom:-75px;** width:50px; background-color: red;">A</div>
<div style="height:50px; **margin-top:-50px;** width:50px; background-color: green;">B</div>

在 margin 都是負值的時候,取的是其中絕對值較大的,而後從零開始,負向位移.
示意圖:

3.參與摺疊的margin中有正值有負值
例子:

<div style="height:50px; **margin-bottom:-50px;** width:50px; background-color: red;">A</div>
<div style="height:50px; **margin-top:100px;** width:50px; background-color: green;">B</div>

在 margin中有正值有負值的時候,要從全部負值中選出絕對值最大的,全部正值中選擇絕對值最大的,兩者相加,此例的結果即爲: 100px + (-50)px =50px;

示意圖:

4.相鄰的margin要一塊兒參與計算
例子:

<div style="margin:50px 0; background-color:green; width:50px;">
    <div style="**margin:-60px 0;**">
           <div style="**margin:150px 0;**">A</div>
    </div>
</div>
<div style="**margin:-100px 0**; background-color:green; width:50px;">
    <div style="**margin:-120px 0;**">
           <div style="**margin:200px 0;**">B</div>
    </div>
</div>

請注意，多個 margin 相鄰摺疊成一個 margin，因此計算的時候，應該取全部相關的值一塊兒計算，而不能分開分步來算。
以上例子中，A 和 B 之間的 margin 摺疊產生的 margin，是6個相鄰 margin 摺疊的結果。將其 margin 值分爲兩組：

正值：50px，150px，200px
負值：-60px，-100px，-120px
根據有正有負時的計算規則，正值的最大值爲 200px，負值中絕對值最大的是 -120px，因此，最終摺疊後的 margin 應該是 200 + (-120) = 80px。

浮動元素,inline-block元素,絕對定位的元素和建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊

另外,要注意,自身的margin-botom和margin-top相鄰時也會發生重疊,只有當自身內容爲空,垂直方向上border,padding,均爲空時,自身的margin-top與margin-bottom纔會相鄰.

原文鏈接:http://w3help.org/zh-cn/kb/006/
推薦網站: http://w3help.org 這個網站能夠幫咱們詳細解讀了css不少的特性,很是棒的網站.

以上都是我我的的粗淺之見,但願口下留情,錯誤之處可評論或者私信給我指明,我會及時改正的.另外關於這篇文章的不解之處或者說以爲我說的不完善或者不明確的地方均可以評論或者私信給我.若是以爲這篇文章幫到你了,記得點贊或者收藏奧!.