基礎問答

問題：標準的 CSS 盒子模型是怎樣的？

答案：標準盒子(zi)模型由內容(rong)區域(yu)（content）、內邊距(ju)（padding）、邊框（border）和(he)外邊距(ju)（margin）組成。在 content-box 模式下，width 和(he) height 屬性僅指內容(rong)區域(yu)的寬(kuan)度和(he)高度，元素(su)實際占據的寬(kuan)度 = width + padding + border + margin，高度同理。

擴展延伸

關于(yu)盒子(zi)模型，其實(shi)問答上都是比(bi)較基礎的，在這里(li)就僅擴(kuo)展(zhan)了解一下 。

BFC：Block Formatting Context，區塊格式上下文，是塊級盒子布局過程發生的位置。

定義比較拗口，我們換句(ju)大(da)白話，就是(shi) BFC 是(shi)個容器(qi)，其(qi)內部(bu)的 DOM 元素按照一(yi)定的規(gui)則進行排列，多個 BFC 之間互相不影響。

關于 BFC 的規則：

• BFC 就是一個塊級元素，遵循塊級元素在文檔流上的排列規則（一個塊級元素占一行，從上到下依次排列）
• 是一個獨立的容器，內部元素不會影響到外部。
• 同一個 BFC 內部的元素之間，相鄰元素的 margin 會有重疊。
• 浮動元素會參與 BFC 的高度計算。

BFC 解決的(de)問題：核心是“隔離(li)布局”

1. 解決 margin 重疊的問題
2. 浮動導致的高度塌陷問題
3. 實現兩欄布局

面試追問

1. 兩個相鄰的 div，高度都設置為 10px，都設置了 margin:10px 之后，他們的總高度是多少？

總高度為 50px，這兩(liang)個(ge)相鄰的(de) div 出現了 margin 重疊(die)的(de)問題。

2. 如果一個設置為 margin:10px，一個設置為 margin:15px，這時候的高度是多少？

總高度(du)為 margin 10px + height 10px + margin 15px + height 10px + margin 15px = 60px，在 margin 重(zhong)疊(die)的(de)(de)時候，會選(xuan)擇兩個里(li)面最(zui)大的(de)(de) margin 作為此時的(de)(de)邊(bian)距(ju)。

3. 你提到的 margin 重疊是指什么？什么時候會觸發這個重疊？

就是兩個相鄰的塊(kuai)級(ji)元素(su)在垂直方(fang)向(xiang)上設置(zhi) margin 的時候(hou)，相鄰的上下 margin 會合并成(cheng)一個，其值為二者最大的那個。

觸發重疊需要滿足條件：1. 塊級元(yuan)素，2. 元(yuan)素之(zhi)間沒有(you) border、padding、content、height 等，即(ji)空的區塊，3. 區塊間未被隔離(li)（參考(kao) MDN 文(wen)檔中的，）

4. 我不想出現這種重疊，我寫的時候是什么樣的，就應該是什么樣的，怎么處理？

通過創(chuang)建(jian) BFC 解決，給(gei)其中一個元素套上 BFC 容器即可。

5. BFC 是什么？怎么創建

BFC 就(jiu)是(shi)一個塊級的容器，用(yong)來設(she)計其內部的元素布局。

通過創建浮動元素、絕對定位元素、行內塊元素、彈性元素、網格元素、overflow 不為 visible 和 clip 的元素等(deng)方式來創建一個 BFC。

6. 我如果使用 overflow: hidden 來觸發 BFC，會有什么影響？

內(nei)容(rong)(rong)會(hui)有溢(yi)出的可(ke)能性，高度溢(yi)出后(hou)，部分(fen)內(nei)容(rong)(rong)不(bu)可(ke)見。一般(ban)通過在(zai)內(nei)容(rong)(rong)增加一個(ge)容(rong)(rong)器(qi)用于控制(zhi)內(nei)容(rong)(rong)顯示(shi)。

7. 問個其他的，margin 和 padding 可以取負值嗎？這倆取負值有什么區別。

padding 是內容區和邊框(kuang)的(de)內部(bu)間距，取負值(zhi)會導(dao)致(zhi)內容區超出盒子邊界，可能覆蓋其他元素，一般不用。

margin 是(shi)(shi)盒子(zi)和其(qi)他元素的(de)外部邊距，一般(ban)來說是(shi)(shi)用于調整(zheng)元素位置的(de)。