常見的面試問題：【CSS】CSS盒模型

1、概念

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。
CSS盒模型：標準模型 + IE模型

1.1 W3C盒子模型(標準盒模型)

1.2 IE盒子模型(怪異盒模型)

2、知識點

2.1 標準模型和IE模型的區別

計算寬度和高度的不一樣。
標準盒模型：盒子總寬度/高度 = width/height + padding + border + margin。（ 即 width/height 只是內容高度，不包含 padding 和 border 值 ）
IE盒子模型：盒子總寬度/高度 = width/height + margin = (內容區寬度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

2.2 CSS如何設置這兩種模型

標準：box-sizing: content-box; ( 瀏覽器默認設置 )
IE： box-sizing: border-box;

2.3 JS如何獲取盒模型對應的寬和高

（1）dom.style.width/height 只能取到行內樣式的寬和高，style 標籤中和 link 外鏈的樣式取不到。
（2）dom.currentStyle.width/height （只有IE兼容）取到的是最終渲染後的寬和高
（3）window.getComputedStyle(dom).width/height 同（2）可是多瀏覽器支持，IE9 以上支持。
（4）dom.getBoundingClientRect().width/height 也是獲得渲染後的寬和高，大多瀏覽器支持。IE9 以上支持，除此外還能夠取到相對於視窗的上下左右的距離。
（6）dom.offsetWidth/offsetHeight 包括高度（寬度）、內邊距和邊框，不包括外邊距。最經常使用，兼容性最好。

2.4 實例題（根據盒模型解釋邊距重疊）

例：父元素裏面嵌套了一個子元素，已知子元素的高度是 100px，子元素與父元素的上邊距是 10px，計算父元素的實際高度。

CSS:

.parents {
   width: 100px;
   background: #FF9934;
}
.child {
  width: 100%;
  height: 100px;
  background: #336667;
  margin-top: 10px;
}

Html:

<section class='parents'>
  <div class='child'><div>
</section>

它的父元素實際高度是 100px 或 110px 均可以。主要看怎麼父元素的盒模型如何設置。如以上代碼：父元素不加 overflow: hidden，則父元素的實際高度爲 100px； 如加上 overflow: hidden 父元素高度爲 110px，給父元素建立了 BFC，塊級格式化上下文。 完整案例: https://jsbin.com/dubimoyahe/...。

2.5 BFC（邊距重疊解決方案）

2.5.1 BFC基本概念

BFC: 塊級格式化上下文
BFC基本概念：BFC 是 CSS 佈局的一個概念，是一塊獨立的渲染區域，是一個環境，裏面的元素不會影響到外部的元素 。
父子元素和兄弟元素邊距重疊，重疊原則取最大值。空元素的邊距重疊是取 margin 與 padding 的最大值。

2.5.2 BFC原理（渲染規則|佈局規則）：

（1）內部的 Box 會在垂直方向，從頂部開始一個接着一個地放置；
（2）Box 垂直方向的距離由 margin (外邊距)決定，屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊；
（3）每一個元素的 margin Box 的左邊， 與包含塊 border Box 的左邊相接觸，（對於從左到右的格式化，不然相反）。即便存在浮動也是如此；
（4）BFC 在頁面上是一個隔離的獨立容器，外面的元素不會影響裏面的元素，反之亦然。文字環繞效果，設置 float；
（5）BFC 的區域不會與 float Box 重疊（清浮動）;
（6）計算 BFC 的高度時，浮動元素也參與計算。

2.5.3 CSS在什麼狀況下會建立出BFC（即脫離文檔流）

0、根元素，即 HTML 元素（最大的一個 BFC）
一、浮動（ float 的值不爲 none ）
二、絕對定位元素（ position 的值爲 absolute 或 fixed ）
三、行內塊（ display 爲 inline-block ）
四、表格單元（ display 爲 table、table-cell、table-caption、inline-block 等 HTML 表格相關的屬性 )
五、彈性盒（ display 爲 flex 或 inline-flex ）
六、默認值。內容不會被修剪，會呈如今元素框以外（overflow 不爲 visible）

2.5.4 BFC做用（使用場景）

一、自適應兩（三）欄佈局（避免多列布局因爲寬度計算四捨五入而自動換行）
二、避免元素被浮動元素覆蓋
三、可讓父元素的高度包含子浮動元素，清除內部浮動（原理：觸發父 div 的 BFC 屬性，使下面的子 div 都處在父 div 的同一個 BFC 區域以內）
四、去除邊距重疊現象，分屬於不一樣的 BFC 時，能夠阻止 margin 重疊

2.6 IFC

2.6.1 IFC基本概念

IFC: 行內格式化上下文
IFC基本概念：

2.6.2 IFC原理（渲染規則|佈局規則）：

（1）內部的 Box 會在水平方向，從含塊的頂部開始一個接着一個地放置；
（2）這些 Box 之間的水平方向的 margin，border 和padding 都有效；
（3）Box 垂直對齊方式：以它們的底部、頂部對齊，或以它們裏面的文本的基線（baseline）對齊（默認，文本與圖片對其），例：line-heigth 與 vertical-align。

更多文章分享：https://www.artroy.com.cn/