前端面試CSS系列——盒模型

盒子

當對一個文檔進行佈局的時候，瀏覽器渲染引擎會根據標準，將頁面中的全部元素表示爲一個一個矩形的盒子。CSS決定這些盒子的大小、位置以及屬性。每一個盒子有四個部分組成，分別是：content，padding，border，margin。

屬性解釋：

1. content內容區域，內容區域能夠定義width和height
2. padding內容區域和邊框之間的空間量
3. border內容區域和內邊距周圍邊框的粗細和樣式。
4. margin邊框和元素外邊緣的空間量

塊級盒子和內聯盒子

在CSS中咱們普遍的使用兩種『盒子』——塊級盒子和內聯盒子。兩種盒子在頁面佈局中有如下特色：

塊級盒子

• 盒子會換行顯示
• width和height屬性能夠發揮做用
• 內邊距padding外邊距margin邊框border會將其餘元素從當前盒子周圍推開
• 默認狀況下盒子寬度會跟父容器同樣寬

內聯盒子

• 盒子不會換行
• width和height屬性不起做用
• 垂直方向的內邊距、外邊距以及邊框會被應用，可是不會把其它處於inline狀態的盒子推開。
• 水平方向的內邊距、外邊距以及邊框會被應用，而且會把其它處於inline狀態的盒子推開。

咱們經過對盒子display屬性的設置，來控制盒子的外部顯示類型。

盒模型類型

完整的CSS盒模型應用於塊級盒子，內聯盒子只使用盒模型中定義的部份內容。盒模型有兩種類型，標準盒模型和IE盒模型。

標準盒模型

在標準盒模型中，若是給盒子設置width和height，實際設置的是content內容區域的寬和高。內邊距padding和邊框border加上設置的寬高一塊兒決定了盒子的大小。

IE盒模型

在IE盒模型中，若是給盒子設置width和height，那麼盒子的大小就是設置的寬高值，若是盒子設置了內邊距padding和邊框border，那麼內容的大小其實是盒子的大小減去內邊距和邊框的大小以後的值。

差別比較

假設咱們定義了以下一個盒子

.box {
    width:100px;
    height:100px;
    margin:25px;
    padding:20px;
    border:15px solid #000;
}

標準盒模型盒子圖示：

盒子的寬度=width + padding-left + padding-right + border-left + border-right(100+20+20+15+15 = 170)

內容的寬度 = width(100)

IE盒模型圖示：

盒子的寬度=width(100)

內容的寬度 = width - padding-left - padding-right - border-left - border-right(100-20-20-15-15 = 30)

在標準盒模型當中，咱們使用CSS定義盒子的寬度width和高度height並非盒子所佔據空間大小。

在IE盒模型當中使用CSS定義盒子的寬度width和高度height就是盒子的大小。

盒模型切換

在現代瀏覽器當中，幾乎全部的瀏覽器，默認的盒模型都是標準盒模型。若是想要使用IE盒模型，能夠經過設置屬性box-sizing: border-box來設置。

在早期仍是IE瀏覽器天下的時候，若是HTML文檔缺失DOCTYPE文檔定義標籤，在IE六、IE七、IE8下默認使用的是IE盒模型。

盒模型沒有好壞優劣之分，根據狀況的差別咱們選擇不一樣的盒模型。

摺疊邊距(邊距重疊)

摺疊邊距（邊距重疊）不是一個Bug；以前咱們說過BFC，下面是W3C關於BFC的相關說明原文：

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

翻譯一下就是說：『在BFC當中，盒子是按照垂直方向一個疊一個排列的，垂直方向上兩個盒子的距離是由margin屬性決定的，在BFC垂直方向的塊級盒子之間margin會發生collapse摺疊』

特色

在W3C關於CSS章節的8.3.1章節詳細說了Collapsing margins邊距摺疊的特色，在此我簡單總結一下一些（不全），詳細的內容點擊查看

• 邊距摺疊只會發生在垂直方向上，橫向margin不會發生摺疊
• 根元素框的邊距不會摺疊
• 若是具備間隙的元素的頂部和底部邊距相鄰，則其邊距與後續兄弟元素的相鄰邊距摺疊，但生成的邊距不會與父塊的底部邊距摺疊。
• 當兩個或更多邊距摺疊時，產生的邊距寬度是摺疊邊距寬度的最大值。在負邊距的狀況下，從正相鄰邊距的最大值中減去負相鄰邊距絕對值的最大值。若是沒有正邊距，則從零中減去相鄰邊距絕對值的最大值。

發生摺疊的狀況

• 同一層相鄰元素之間，相鄰元素外邊距重疊
• 父元素與子元素外邊距重疊
• 空的塊級元素重疊

解決方法

知道了會發生邊距摺疊的緣由，那麼解決方法天然是小菜一碟。

1. 改變文檔流，使用float或者position
2. 觸發元素的BFC（建立了BFC的元素和它的子元素不會發生摺疊）
3. 只有塊級盒子纔會發生摺疊，修改元素盒子類型爲內聯盒子

面試回答

一個完整的盒模型有四部分組成，分別是內容區域content，內邊距padding，邊框border，以及外邊距margin；其中margin不參與計算盒子的大小；盒模型有兩種類型，IE盒模型和標準盒模型；有時候IE盒模型也被成爲怪異盒模型；在現代瀏覽器當中默認是盒子模型，咱們能夠經過CSS的box-sizing:border-box;來修改盒模型爲IE盒模型；在IE盒模型當中，盒子的寬度是咱們定義的width值，而在標準盒模型當中盒子的寬度是內容的width值加上左右內邊距加上左右邊框的值。

擴展閱讀

詳解CSS的盒模型(box model) 及 CSS3新增盒模型計算方式box-sizing

Collapsing margins

BFC

---

前端面試系列其它文章

前端面試CSS系列——BFC
前端面試CSS系列——DIV垂直水平居中
前端面試CSS系列——移動端1PX像素問題