之前寫了一篇關於如何解決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四個邊界.
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毗鄰可以歸結為以下兩點:
示例**:
class="c">
bdiv>
div>
div>
div>
效果圖:
因為.c這個div的高度不是auto,所以他的margin-bottom和他的子元素b的margin-bottom不相鄰,因此,不會發生重疊,依然只有50px;
摺疊後margin的計算
1.參與摺疊的margin都是正值
例子:bdiv>
在 margin 都是正數的情況下，取其中 margin 較大的值為最終 margin 值.
示意圖:
2.參與摺疊的margin都是負值
例子:bdiv>
在 margin 都是負值的時候,取的是其中絕對值較大的,然後從零開始,負向位移.
示意圖:
3.參與摺疊的margin中有正值有負值
例子:bdiv>
在 margin中有正值有負值的時候,要從所有負值中選出絕對值最大的,所有正值中選擇絕對值最大的,二者相加,此例的結果即為: 100px + (-50)px =50px;
示意圖:
4.相鄰的margin要一起參與計算
例子:
adiv>
div>
div>
bdiv>
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才會相鄰.
原文連線:
推薦**:
這個**可以幫我們詳細解讀了css很多的特性,非常棒的**.
詳解css盒模型與外邊距重疊
之前寫了一篇關於如何解決css的外邊距重疊問題,可是後來發現,我有些本末倒置了,對於乙個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,為什麼會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的...
css 盒模型的外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...
css盒模型。邊框和內外邊距
css盒模型 外邊距 邊框 內填充 內容 盒模型分為兩種 標準盒模型 怪異盒模型 ie盒模型 邊框 border border 10px solid blue 表示設定10畫素藍色實線條的邊框 是以下三個樣式的復合語法 border width 10px 設定邊框的寬度 border color b...