常見(jiàn)的面試問(wèn)題：【CSS】CSS盒模型

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

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

一、概念

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

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

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

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

計(jì)算寬度和高度的不同。
標(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; ( 瀏覽器默認(rèn)設(shè)置 )
IE： box-sizing: border-box;

2.3 JS如何獲取盒模型對(duì)應(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 以上支持，除此外還可以取到相對(duì)于視窗的上下左右的距離。
（6）dom.offsetWidth/offsetHeight 包括高度（寬度）、內(nèi)邊距和邊框，不包括外邊距。最常用，兼容性最好。

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

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

CSS:

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

Html:

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

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

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

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

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

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

0、根元素，即 HTML 元素（最大的一個(gè) BFC）
1、浮動(dòng)（ float 的值不為 none ）
2、絕對(duì)定位元素（ 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、默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（overflow 不為 visible）

2.5.4 BFC作用（使用場(chǎng)景）

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

2.6 IFC 2.6.1 IFC基本概念

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

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

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

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