摘要：前言總括對于盒子模型，，和外邊距合并等概念和問題的總結原文地址從盒子模型說起知乎專欄前端進擊者博主博客地址的個人博客為學之道，莫先于窮理窮理之要，必先于讀書。

總括： 對于盒子模型，BFC，IFC和外邊距合并等概念和問題的總結

原文地址：從CSS盒子模型說起

知乎專欄：前端進擊者

博主博客地址：Damonare的個人博客

為學之道，莫先于窮理；窮理之要，必先于讀書。

? CSS盒子模型是CSS基礎中的基礎，個人之前對于這塊的理解有偏差?，由于涉及知識點比較多所以寫一篇總結備忘。
之前打算的是兩周一次更新博文的，但是時間用在了刷題上，做了很多leetcode上算法數據結構的題記錄在github，但其實也有在更新啦~只不過是對之前的一些博文進行糾正:)?

? 最近秋招在即，壓力倍增，前幾天把博客導入頁的在讀大三本科生改為了在讀大四本科生，不禁心生感慨，時光荏苒。轉眼間我的這個小窩竟然已經快一年了。當初建立這個站點也是想找個說話的地方，有的人可能就是不喜歡說，只喜歡寫(比如我)，然而自從實習后確實提不起精神來寫了，一是沒精力，二是對于遇到的一些坑不想多帶帶寫一篇博客記錄。這里還是想保持一份純凈，就是以總結和理解難點為主調 其它的一般會托管在github庫里記錄一下。閑話不多說，說說今天的主角??♀?

? CSS盒子模型想來都不陌生，但還是想先介紹一下，以保證文章的完整性。?

? CSS盒子模型：

在一個文檔中，每一個元素都被抽象成一個盒子，每一個盒子又包括四部分(從內到外):內容(content)，內填充(padding)，邊框(border)，外邊距(margin)。見上圖，這是從二維的角度分析，來張三維立體圖：?

此圖很形象的解釋了CSS盒子的構成：

content box：立體盒子的核心

padding box：內邊距區域padding area 延伸到包圍padding的邊框。如果內容區域content area設置了背景、顏色或者圖片，這些樣式將會延伸到padding上(當然我們可以通過background-clip設置作用區域)

border box：由border和4條border edge組成。若border寬度設置為0，則border edge與padding edage重疊；

margin box：由margin和4條margin edge組成。若margin寬度設置為0，則margin edge與border edage重疊。

?看起來很復雜的樣子...

拿PS圖層的概念更好理解這塊，最上面的就是content box往下一次是padding box,border box,margin box。

那么盒子模型一般分為兩種：

所謂IE盒子模型，就是之前IE瀏覽器實現的一種怪異的盒子模型，怎么怪異呢？當我們這樣設置的時候:

div {
    width: 100px;
      height: 100px;
}

理論上我們想要設置的就是content box的寬高嘛，但是IE在解析的時候會按照這個規則解析：

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

這就導致了這種尷尬的境地:下面無內容的話直接戳這里?