一、外邊距摺疊：指的是毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距。
1、摺疊的結果
①毗鄰兄弟元素
- 參加摺疊的margin都是正值：取其中 margin 較大的值爲最終 margin 值。
- 參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。
- 參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加
②、父元素與子元素之間：如果塊元素的 margin-top 與它的第一個子元素的margin-top 之間沒有 border、padding、inline content、 clearance 來分隔，或者塊元素的 margin-bottom 與它的最後一個子元素的margin-bottom 之間沒有 border、padding、inline content、height、min-height、 max-height 分隔，那麼外邊距會塌陷。子元素多餘的外邊距會被父元素的外邊距截斷。，這時，子元素的外邊距並不作用於父元素，而是作用於父元素之外的對象。
2、摺疊的產生情況
- 必須是處於常規文檔流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中。
- 沒有線盒，沒有空隙，沒有padding和border將他們分隔開(ps :所以解決辦法中有padding或者border兩種辦法)
- 都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況
- 元素的margin-top與其第一個常規文檔流的子元素的margin-top
- 元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
- height爲auto的元素的margin-bottom與其最後一個常規文檔流的子元素的margin-bottom
- 高度爲0並且最小高度也爲0，不包含常規文檔流的子元素，並且自身沒有建立新的BFC的元素的margin-top和margin-bottom
3、解決方法
- 在父層div加上：overflow:hidden；
- 把margin-top外邊距改成padding-top內邊距;
- 父元素產生邊距重疊的邊有不爲 0 的 padding 或寬度不爲 0 且 style 不爲 none 的 border，父層div加：padding-top: 1px,或者 border-top:1px ;
- 設置父元素或子元素浮動（left/right）
- 設置父元素dispaly:inline-block或者display:table-cell;
- 給父元素加上絕對定位
也就是讓它不在滿足外邊距坍塌所需條件或者處罰BFC來解決外邊距坍塌問題
4、爲什麼會產生邊距摺疊設計呢？
CSS的基本模型是排版。只是前端工程師現在做得更多的是 佈局 而非 文字排版，但CSS並未界定這兩者的區別。而 margin 摺疊是爲實現文本排版的段落間距而提供的特性。所以很多時候 margin 摺疊的特性會帶給我們諸多疑惑。
二、標準盒模型和怪異盒子
1、怪異盒子的出現原因：當早期的瀏覽器Netscape 4和Explorer 4對css進行解析時，並未遵守W3C標準，這時的解析方式就被我們稱之爲quirks mode(怪異模式)。而到了W3C制定標準之後，這些瀏覽器就不能繼續使用這種頁面了，因而會導致大部分現有站點都不能使用。基於這個原因，瀏覽器才引入兩種模式來處理一些遺留的站點。
2、渲染條件：解決方案就是採用doctype聲明，大多數瀏覽器採用下面的這些判斷規則
- 瀏覽器要使老舊的網頁正常工作，但這部分網頁是沒有doctype聲明的，所以瀏覽器對沒有doctype聲明的網頁採用quirks
mode解析。 - 對於擁有doctype聲明的網頁，什麼瀏覽器採用何種模式解析，這裏有一張詳細列表可參考：http://hsivonen.iki.fi/doctype/
- 對於擁有doctype聲明的網頁，這裏有幾條簡單的規則可用於判斷：
對於那些瀏覽器不能識別的doctype聲明，瀏覽器採用strict mode解析 在doctype聲明中，沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用quirks mode呈現，其他的則使用strict mode解析。可以這麼說，在現有有doctype聲明的網頁，絕大多數是採用strict mode進行解析的。
3、怪異盒子與標準盒子的區別
標準盒模型和怪異盒子的區別在於怪異盒子的寬度和高度是內容和padding還有邊框的總和。而標準盒模型的寬高則是指其內容，不包含padding和border。
