盒模型概念
盒模型是css的基石之一，它指定元素如何顯示及（在某種程度上）如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容、內邊距、邊框和外邊距組成，如下圖：
如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控制元素之間的間隔。
css中，width和height 指的是元素內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
ie盒模型
ie的早期版本，包括ie6，在混雜模式中使用自己的非標準盒模型。在css中，這些瀏覽的width、height屬性不是內容的寬、高，而是內容、內邊距和邊框的寬/高總和。
有幾個辦法可以解決這個問題，但是目前最好的解決辦法是迴避這個問題，也就是說，如果已經為元素指定了寬/高，就不要給元素新增指定的內邊距，而是將內邊距或外邊距新增到元素的父元素或子元素。
外邊距定義：
圍繞在元素邊框的空白域是外邊距，設定外邊距會在元素外建立額外的「空白」。注意，
外邊距也屬於元素的一部分
。
外邊距疊加
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
外邊距合併（疊加）是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
相鄰元素疊加
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：
父子元素疊加
包含元素的外邊距隔著 父元素的內邊距和邊框， 當這兩項都不存在的時候， 父子元素垂直外邊距相鄰， 產生疊加。 新增任何一項即會取消疊加。
當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
元素自身疊加
儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併。
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了乙個小的外邊距。
外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。
外邊距疊加解決方案
（1）外層元素padding代替
（2）外層元素透明邊框 border:1px solid transparent（或者與元素背景顏色相同）
(3)外層元素絕對定位 position:absolute（具有包裹性，會包裹內容）
(4)外層元素overflow:hidden（寬度不包裹內容，100%顯示）
(5)外層元素加float:left
(6)外層元素padding:1px
CSS外邊距疊加
外邊距疊加發生在上下外邊距之間，左右外邊距不會發生疊加的情況 疊加之後的外邊距高度等於發生疊加之前兩個外邊距中的最大值 外邊距疊加有三種情況 1 同級元素之間 當乙個元素出現另乙個元素的上面的時候，第乙個元素的下邊距會和將會與第二元素的上邊距會發生合併 2 父子元素之間 父元素與子元素之間的上下外邊...
CSS外邊距疊加問題
css外邊距疊加就是margin collapse，邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距,水平邊 距永遠不會重合。重疊結果計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩個之間較大的值.兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值.兩個邊距一正一負時，摺疊結...
外邊距疊加
外邊距疊加其實是乙個非常簡單的概念，不過，一開始我還是被其高大上的名字 margin collapsing 唬得不輕 什麼是外邊距疊加呢？在normal流中，同一bfc下，相鄰垂直外邊距會重疊形成乙個外邊距，外邊距高度為疊加的外邊距較大者。我是這樣記住的 盡量在滿足雙方的margin下，使得marg...