基礎(chǔ)問答

問題：標(biāo)準(zhǔn)的 CSS 盒子模型是怎樣的？

答案：標(biāo)準(zhǔn)盒子模型由內(nèi)容區(qū)域（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。在 content-box 模式下，width 和 height 屬性僅指內(nèi)容區(qū)域的寬度和高度，元素實(shí)際占據(jù)的寬度 = width + padding + border + margin，高度同理。

擴(kuò)展延伸

關(guān)于盒子模型，其實(shí)問答上都是比較基礎(chǔ)的，在這里就僅擴(kuò)展了解一下 BFC 。

BFC：Block Formatting Context，區(qū)塊格式上下文，是塊級(jí)盒子布局過程發(fā)生的位置。

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

關(guān)于 BFC 的規(guī)則：

• BFC 就是一個(gè)塊級(jí)元素，遵循塊級(jí)元素在文檔流上的排列規(guī)則（一個(gè)塊級(jí)元素占一行，從上到下依次排列）
• 是一個(gè)獨(dú)立的容器，內(nèi)部元素不會(huì)影響到外部。
• 同一個(gè) BFC 內(nèi)部的元素之間，相鄰元素的 margin 會(huì)有重疊。
• 浮動(dòng)元素會(huì)參與 BFC 的高度計(jì)算。

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

1. 解決 margin 重疊的問題
2. 浮動(dòng)導(dǎo)致的高度塌陷問題
3. 實(shí)現(xiàn)兩欄布局

面試追問

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

總高度為 50px，這兩個(gè)相鄰的 div 出現(xiàn)了 margin 重疊的問題。

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

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

3. 你提到的 margin 重疊是指什么？什么時(shí)候會(huì)觸發(fā)這個(gè)重疊？

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

觸發(fā)重疊需要滿足條件：1. 塊級(jí)元素，2. 元素之間沒有 border、padding、content、height 等，即空的區(qū)塊，3. 區(qū)塊間未被隔離（參考 MDN 文檔中的，沒有內(nèi)容將父元素和后代元素分開）

4. 我不想出現(xiàn)這種重疊，我寫的時(shí)候是什么樣的，就應(yīng)該是什么樣的，怎么處理？

通過創(chuàng)建 BFC 解決，給其中一個(gè)元素套上 BFC 容器即可。

5. BFC 是什么？怎么創(chuàng)建

BFC 就是一個(gè)塊級(jí)的容器，用來設(shè)計(jì)其內(nèi)部的元素布局。

通過創(chuàng)建浮動(dòng)元素、絕對(duì)定位元素、行內(nèi)塊元素、彈性元素、網(wǎng)格元素、overflow 不為 visible 和 clip 的元素等方式來創(chuàng)建一個(gè) BFC。

6. 我如果使用 overflow: hidden 來觸發(fā) BFC，會(huì)有什么影響？

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

7. 問個(gè)其他的，margin 和 padding 可以取負(fù)值嗎？這倆取負(fù)值有什么區(qū)別。

padding 是內(nèi)容區(qū)和邊框的內(nèi)部間距，取負(fù)值會(huì)導(dǎo)致內(nèi)容區(qū)超出盒子邊界，可能覆蓋其他元素，一般不用。

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