基礎問答

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

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

擴展延伸

關于盒子模型，其實問答上都是比較基礎的，在這里就僅擴展了解一下 。

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

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

關于 BFC 的規則：

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

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

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

面試追問

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

總高度為 50px，這兩個相鄰的 div 出現了 margin 重疊的問題。

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

總高度為 margin 10px + height 10px + margin 15px + height 10px + margin 15px = 60px，在 margin 重疊的時候，會選擇兩個里面最大的 margin 作為此時的邊距。

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

就是兩個相鄰的塊級元素在垂直方向上設置 margin 的時候，相鄰的上下 margin 會合并成一個，其值為二者最大的那個。

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

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

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

5. BFC 是什么？怎么創建

BFC 就是一個塊級的容器，用來設計其內部的元素布局。

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

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

內容會有溢出的可能性，高度溢出后，部分內容不可見。一般通過在內容增加一個容器用于控制內容顯示。

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

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

margin 是盒子和其他元素的外部邊距，一般來說是用于調整元素位置的。