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

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

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

知乎專欄：前端進(jìn)擊者

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

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

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

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

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

? CSS盒子模型：

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

此圖很形象的解釋了CSS盒子的構(gòu)成：

content box：立體盒子的核心

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

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

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

?看起來很復(fù)雜的樣子...

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

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

所謂IE盒子模型，就是之前IE瀏覽器實現(xiàn)的一種怪異的盒子模型，怎么怪異呢？當(dāng)我們這樣設(shè)置的時候:

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

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

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

這就導(dǎo)致了這種尷尬的境地:下面無內(nèi)容的話直接戳這里?