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

android_c 發(fā)布于2019-08-30 15:44 / 891人閱讀

摘要：標(biāo)準(zhǔn)盒模型盒子總寬度高度。以上支持，除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置。空元素的邊距重疊是取與的最大值。

一、概念

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

1.1 W3C盒子模型(標(biāo)準(zhǔn)盒模型)

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

二、知識點 2.1 標(biāo)準(zhǔn)模型和IE模型的區(qū)別

計算寬度和高度的不同。
標(biāo)準(zhǔn)盒模型：盒子總寬度/高度 = width/height + padding + border + margin。（即 width/height 只是內(nèi)容高度，不包含 padding 和 border 值）
IE盒子模型：盒子總寬度/高度 = width/height + margin = (內(nèi)容區(qū)寬度/高度 + padding + border) + margin。（即 width/height 包含了 padding 和 border 值）

2.2 CSS如何設(shè)置這兩種模型

標(biāo)準(zhǔn)：box-sizing: content-box; ( 瀏覽器默認設(shè)置 )
IE： box-sizing: border-box;

2.3 JS如何獲取盒模型對應(yīng)的寬和高

（1）dom.style.width/height 只能取到行內(nèi)樣式的寬和高，style 標(biāo)簽中和 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 包括高度（寬度）、內(nèi)邊距和邊框，不包括外邊距。最常用，兼容性最好。

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

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

CSS:

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

Html:

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

2.5 BFC（邊距重疊解決方案） 2.5.1 BFC基本概念

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

2.5.2 BFC原理（渲染規(guī)則|布局規(guī)則）：

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

2.5.3 CSS在什么情況下會創(chuàng)建出BFC（即脫離文檔流）

0、根元素，即 HTML 元素（最大的一個 BFC）
1、浮動（ float 的值不為 none ）
2、絕對定位元素（ position 的值為 absolute 或 fixed ）
3、行內(nèi)塊（ display 為 inline-block ）
4、表格單元（ display 為 table、table-cell、table-caption、inline-block 等 HTML 表格相關(guān)的屬性 )
5、彈性盒（ display 為 flex 或 inline-flex ）
6、默認值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（overflow 不為 visible）

2.5.4 BFC作用（使用場景）

1、自適應(yīng)兩（三）欄布局（避免多列布局由于寬度計算四舍五入而自動換行）
2、避免元素被浮動元素覆蓋
3、可以讓父元素的高度包含子浮動元素，清除內(nèi)部浮動（原理：觸發(fā)父 div 的 BFC 屬性，使下面的子 div 都處在父 div 的同一個 BFC 區(qū)域之內(nèi)）
4、去除邊距重疊現(xiàn)象，分屬于不同的 BFC 時，可以阻止 margin 重疊

2.6 IFC 2.6.1 IFC基本概念

IFC: 行內(nèi)格式化上下文
IFC基本概念：

2.6.2 IFC原理（渲染規(guī)則|布局規(guī)則）：

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

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