本篇文章給大家分享6個(gè)關(guān)于CSS盒模型的面試題，查漏補(bǔ)缺，看看這六個(gè)面試題你能答對(duì)幾個(gè)？是否可以全部答對(duì)？

對(duì)于前端面試來(lái)說(shuō)，css盒模型肯定是必考必問(wèn)的前端知識(shí)點(diǎn)，因?yàn)檫@是CSS基石中非常重要的內(nèi)容，而且它關(guān)聯(lián)的知識(shí)也非常多，那面試中一般都是如何層層遞進(jìn)的提問(wèn)呢？下面一起來(lái)看看吧！

1、談?wù)勀銓?duì)CSS盒模型的認(rèn)識(shí)？

問(wèn)題簡(jiǎn)答

所有 HTML 元素都可以視為方框。在 CSS 中，在談?wù)撛O(shè)計(jì)和布局時(shí)，會(huì)使用術(shù)語(yǔ)“盒模型”或“框模型”。CSS 框模型實(shí)質(zhì)上是一個(gè)包圍每個(gè) HTML 元素的框。

它包括：

• 外邊距 → margin
• 邊框 → border
• 內(nèi)邊距 → padding
• 實(shí)際的內(nèi)容 → content

它有標(biāo)準(zhǔn)模型和IE模型兩種；

知識(shí)解析

盒模型，英文box model。

• 無(wú)論是div、span、還是a都是盒子。
• 圖片、表單元素一律看作是文本，它們并不是盒子，因?yàn)橐粡垐D片里面并不能放東西，它自己就是自己的內(nèi)容。

盒模型各部分說(shuō)明：

• Margin(外邊距) ：清除邊框外的區(qū)域，外邊距是透明的（可以為負(fù)值）。
• Border(邊框) ：圍繞在內(nèi)邊距和內(nèi)容外的邊框。
• Padding(內(nèi)邊距) ：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的（不允許負(fù)值）。
• Content(內(nèi)容) ：盒子的內(nèi)容，顯示文本和圖像。

2、標(biāo)準(zhǔn)模型和IE模型的區(qū)別？

問(wèn)題簡(jiǎn)答

標(biāo)準(zhǔn)模型和ie模型的區(qū)別是計(jì)算寬width高h(yuǎn)eight的不同。

• 標(biāo)準(zhǔn)模型width不計(jì)算padding和border；
• ie模型width計(jì)算padding 和border；

知識(shí)解析

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

設(shè)置的寬高是對(duì)實(shí)際內(nèi)容content的寬高進(jìn)行設(shè)置，內(nèi)容周圍的border和padding另外設(shè)置;

即元素實(shí)際占位的寬高為：

width【height】= 設(shè)置的content的寬【高】 + padding + border + margin

可以通過(guò)實(shí)例來(lái)理解：寫(xiě)一個(gè)div，同時(shí)設(shè)置了寬、高、邊框、內(nèi)邊距、外邊距；

//注：如果下面示例未寫(xiě)html和css,說(shuō)明與此處相同 .box {     width: 100px;     height: 100px;     border: 10px solid #CC9966;     padding: 30px;     margin: 40px;     background: #66FFFF; } <div class="box">Axjy</div>

效果及Chrome的開(kāi)發(fā)者工具中顯示的盒模型如下：

可以看到content部分即為100×100，內(nèi)容周圍都是另外設(shè)置的，width=40+10+30+100+30+10+40=180；

IE盒子模型（怪異盒模型）

設(shè)置的寬高是對(duì)實(shí)際內(nèi)容content + 內(nèi)邊距（padding）+邊框（border）之和的width和height進(jìn)行設(shè)置的;

即元素實(shí)際占位的寬高為：

width（height）= 設(shè)置的width（height）+外邊距margin

和上面使用同樣的例子，但是通過(guò)設(shè)置box-sizing:border-box;，把它變?yōu)镮E盒模型；

.box {     width: 100px;     height: 100px;     border: 10px solid #CC9966;     padding: 30px;     margin: 40px;     background: #66FFFF;     box-sizing: border-box;//注意 } <div class="box">Axjy</div>

效果及Chrome的開(kāi)發(fā)者工具中顯示的盒模型如下：

可以很明顯的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;

3、CSS如何設(shè)置這兩種模型？

問(wèn)題簡(jiǎn)答

上面的示例其實(shí)已經(jīng)用到了這個(gè)設(shè)置

• css設(shè)置標(biāo)準(zhǔn)模型：Box-sizing:context-box (也是瀏覽器默認(rèn)的盒模型)；
• css設(shè)置Ie模型：box-sizing:border-box;

4、JS如何設(shè)置/獲取盒模型對(duì)應(yīng)的寬和高？

問(wèn)題簡(jiǎn)答

1) dom.style.width/height【只能取到內(nèi)聯(lián)元素】 2) dom.currentStyle.width/height【只有IE支持】 3) document.getComputedStyle(dom,null).width/height   4) dom.getBoundingClientRect().width/height  5) dom.offsetWidth/offsetHeight【常用】

知識(shí)解析

1、dom.style.width/height

通過(guò)dom節(jié)點(diǎn)的style樣式獲取，只能取到行內(nèi)樣式的寬和高，style 標(biāo)簽中和 link 外鏈的樣式取不到

.box{...} ----------------------------  let targetDom = document.querySelector('.box'); let width = targetDom.style.width; let height = targetDom.style.height;  console.log("width",width) console.log("height",height)

使用類設(shè)置寬高時(shí)

獲取的寬高為空

在行內(nèi)設(shè)置寬高時(shí)

獲取的是行內(nèi)設(shè)置的寬高

element.style.xxx 這種只能取得內(nèi)嵌樣式的屬性，獲取樣式能讀能寫(xiě)

2、dom.currentStyle.width/height

取到的是最終渲染后的寬和高，如果有設(shè)置寬高，則不論哪種盒模型獲取到的都是設(shè)置的寬高,只有IE兼容

.box {...同上} ----------------------------  let targetDom = document.querySelector('.box'); let width = targetDom.currentStyle.width; let height = targetDom.currentStyle.height;

element.currentStyle[xxx] 可以取得內(nèi)部和外部樣式，但是只兼容ie瀏覽器，獲取的樣式只能讀

3、document.getComputedStyle(dom,null).width/height

取到的是最終渲染后的寬和高，如果有設(shè)置寬高，則不論哪種盒模型獲取到的都是設(shè)置的寬高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

• 第一個(gè)參數(shù)：取得計(jì)算樣式的元素；
• 第二個(gè)參數(shù)：一個(gè)偽元素字符串（例如“:after”），如果不需要偽元素信息，默認(rèn)為null；

.box {...同上} ----------------------------  let targetDom = document.querySelector('.box'); let width =  window.getComputedStyle(targetDom).width let height = window.getComputedStyle(targetDom).height  console.log("width",width) console.log("height",height)

『小擴(kuò)展』

如果box類不設(shè)置寬高，而是由內(nèi)容自動(dòng)撐開(kāi)；

則標(biāo)準(zhǔn)盒模型通過(guò)getComputedStyle獲取到的寬高是content的值；

IE盒模型通過(guò)getComputedStyle獲取到的寬高 = border + padding + content，不包括外邊距；

4、dom.getBoundingClientRect().width/height

得到渲染后的寬和高，大多瀏覽器支持。IE9以上支持。

.box {...同上} ---------------------------- let targetDom = document.querySelector('.box'); let width = targetDom.getBoundingClientRect().width; let height = targetDom.getBoundingClientRect().height console.log('width',width) console.log('height',height)

標(biāo)準(zhǔn)模型，寬高設(shè)置為100的結(jié)果，額外包括了padding和border的值；

IE模型，寬高設(shè)置為100的結(jié)果；

『小擴(kuò)展』

如果box類不設(shè)置寬高，而是由內(nèi)容自動(dòng)撐開(kāi)；

不論是哪種模型，獲取到的都是（border + padding + content)，不包括外邊距；

getBoundingClientRect還可以取到相對(duì)于視窗的上下左右的距離（用于獲取某個(gè)元素相對(duì)于視窗的位置集合）。

5、dom.offsetWidth/offsetHeight（常用）

包括高度（寬度）、內(nèi)邊距和邊框，不包括外邊距。最常用，兼容性最好。

.box {...同上} ---------------------------- let targetDom = document.querySelector('.box'); let width = targetDom.offsetWidth; let height = targetDom.offsetHeight; console.log('width',width) console.log('height',height)

標(biāo)準(zhǔn)模型，寬高設(shè)置為100的結(jié)果；

IE模型，寬高設(shè)置為100的結(jié)果；

小擴(kuò)展

如果box類不設(shè)置寬高，而是由內(nèi)容自動(dòng)撐開(kāi)；

不論是哪種模型，獲取到的都是（border + padding + content)，不包括margin；

從上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 結(jié)果是一樣的

5、根據(jù)盒模型解釋邊距重疊

問(wèn)題簡(jiǎn)答

外邊距重疊是指兩個(gè)【垂直】 【相鄰】的塊級(jí)元素，當(dāng)上下兩個(gè)邊距相遇時(shí)，其外邊距會(huì)產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。（水平方向不會(huì)發(fā)生）

『原因』

根據(jù)W3C文檔的說(shuō)明，當(dāng)符合以下條件時(shí)，就會(huì)觸發(fā)外邊距重合

• 都是普通流中的元素且屬于同一個(gè) BFC
• 沒(méi)有被 padding、border、clear 或非空內(nèi)容隔開(kāi)
• 兩個(gè)或兩個(gè)以上垂直方向的「相鄰元素」

相鄰元素包括父子元素和兄弟元素

『重疊后的margin計(jì)算』

• 1、margin都是正值時(shí)取較大的margin值

• 2、margin都是負(fù)值時(shí)取絕對(duì)值較大的，然后負(fù)向位移。

• 3、margin有正有負(fù)，從負(fù)值中選絕對(duì)值最大的，從正值中選取絕對(duì)值最大的，然后相加

邊距重疊詳解及解決方案

1、嵌套塊（父子）元素垂直外邊距的合并

對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒(méi)有padding-top及border，則父元素的margin-top會(huì)與子元素的margin-top發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。

『解決辦法』

• 1、為父元素定義1px的border-top或padding-top。
• 2、為父元素添加overflow:hidden。
• 3、子元素或父元素設(shè)置display:inline-block。
• 4、父元素加前置內(nèi)容（::before）生成。（推薦）

『示例』

在頁(yè)面放兩個(gè)正方形

<div class="parent-box">     <div class="child-box"></div> </div>

父元素margin-top設(shè)為0，子元素設(shè)置20px;

.parent-box{     width: 100px;     height: 100px;     margin-top: 0;     background: #99CCFF; } .child-box{     width: 50px;     height: 50px;     margin-top: 20px;     background: #FF9933; }

預(yù)期效果：應(yīng)該是父級(jí)元素沒(méi)有邊距，子元素頂部和父元素頂部之間的距離為20

實(shí)際效果：父子盒子重疊，父級(jí)與外面的間隔變成了20（會(huì)取較大的值，因?yàn)楦讣?jí)為0，所以取的是子級(jí)的margin）

通過(guò)上面的解決辦法處理之后

方法一、二、三

方法四

.parent-box::before {     content : "";     display :table; }

達(dá)到的效果

2、相鄰塊（兄弟）元素垂直外邊距的合并（外邊距塌陷）

當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果

• 上面的元素有下外邊距margin-bottom，
• 下面的元素有上外邊距margin-top，

則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。

『解決辦法』

1）為了達(dá)到想要的間距，最好在設(shè)置margin-top/bottom值時(shí)統(tǒng)一設(shè)置上或下；

2）或者用以下的BFC解決，下面有詳解

6、談?wù)凚FC

BFC的基本概念

BFC全稱為塊格式化上下文 (Block Formatting Context) ，是 Web 頁(yè)面中盒模型布局的 CSS 渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器。

BFC的通俗理解：首先BFC是一個(gè)名詞，就是一個(gè)有特定規(guī)則的區(qū)域。我們可以理解為一個(gè)箱子（實(shí)際上是看不見(jiàn)摸不著的），箱子里面物品的擺放是不受外界的影響的。

W3C 規(guī)范對(duì)此作了詳細(xì)的描述：

• 浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不為visiable 的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的 BFC（塊級(jí)格式上下文）。

• 在 BFC 中，盒子從頂端開(kāi)始垂直的一個(gè)接一個(gè)排列，兩個(gè)盒子之間的垂直間距由他們的 margin 值決定，在同一個(gè) BFC 中，兩個(gè)相鄰塊級(jí)盒子的垂直外邊距會(huì)產(chǎn)生折疊。

• 在 BFC 中，每一個(gè)盒子的左外邊緣會(huì)觸碰到容器的左邊緣，對(duì)于從右到左的格式來(lái)說(shuō)，則觸碰到右邊緣。即使在浮動(dòng)里也是這樣的（盡管一個(gè)盒子的 line boxes 會(huì)因?yàn)楦?dòng)而收縮），除非這個(gè)盒子的內(nèi)部創(chuàng)建了一個(gè)新的 BFC（由于浮動(dòng)，在這種情況下盒子本身將會(huì)變得更窄）

BFC的布局規(guī)則（原理/渲染規(guī)則）

1. 計(jì)算BFC高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算（清除浮動(dòng)）
2. BFC的區(qū)域不會(huì)與浮動(dòng)元素的box重疊。（防止浮動(dòng)文字環(huán)繞）
3. BFC在頁(yè)面上是一個(gè)獨(dú)立的容器，內(nèi)外元素不相互影響。（解決外邊距重疊問(wèn)題）
4. Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。

下面的使用場(chǎng)景會(huì)通過(guò)這些規(guī)則來(lái)處理一些實(shí)際的問(wèn)題。

如何創(chuàng)建BFC

括號(hào)里面是一些副作用

• 浮動(dòng)元素：float:left | float:right;【會(huì)導(dǎo)致父元素的寬度丟失,也會(huì)導(dǎo)致下邊的元素上移】
• 定位元素：position:absolute | position:fixed；
• display的一些值：display:inline-block【轉(zhuǎn)為行內(nèi)塊會(huì)導(dǎo)致寬度丟失】 | display:flex | display:table | table-cell、table-caption、inline-table、inline-flex、grid、inline-grid；
• overflow值不為visible：overflow:hidden;【將會(huì)剪切掉溢出的元素】 | overflow:auto、overflow:scroll;
• display:flow-root【新屬性，BFC創(chuàng)建新方式，沒(méi)有任何副作用，注意瀏覽器兼容】

『注意』

display:table也可以生成BFC的原因在于Table會(huì)默認(rèn)生成一個(gè)匿名的table-cell，是這個(gè)匿名的table-cell生成了BFC。

并不是任意一個(gè)元素都可以被當(dāng)做BFC，只有當(dāng)這個(gè)元素滿足以上任意一個(gè)條件的時(shí)候，這個(gè)元素才會(huì)被當(dāng)做一個(gè)BFC

BFC的使用場(chǎng)景

1、清除浮動(dòng)

浮動(dòng)的元素會(huì)脫離普通文檔流，如下,父級(jí)容器只剩下2px的邊距高度。

利用overflow: hidden給父級(jí)創(chuàng)建BFC之后

以上方法可以實(shí)現(xiàn)清楚浮動(dòng)，但是還是推薦使用偽類的方式。

為什么要清除浮動(dòng)? 浮動(dòng)塌陷,包含塊沒(méi)有設(shè)置高度或者是自適應(yīng)的時(shí)候、包含塊就不能撐起來(lái)，變成塌陷的狀態(tài)。

2、防止浮動(dòng)文字環(huán)繞

有如下文字環(huán)繞效果：

brother-box有部分被浮動(dòng)元素所覆蓋（文本信息不回被浮動(dòng)元素覆蓋），如果想避免元素被覆蓋，可利用創(chuàng)建BFC的方法，如給brother-box加overflow: hidden，則可得到以下效果

『理由』上面的規(guī)則二：BFC的區(qū)域不會(huì)與浮動(dòng)元素的box重疊

這個(gè)方法可以用來(lái)實(shí)現(xiàn)兩列自適應(yīng)布局，左邊的寬度固定，右邊的內(nèi)容自適應(yīng)寬度。

3、利用BFC解決邊距重疊問(wèn)題

根據(jù)前面的邊距重合條件來(lái)看，想要解決邊距重疊，只需要破壞其中的某個(gè)觸發(fā)條件即可，比如創(chuàng)建一個(gè)BFC。

根據(jù) BFC 的定義，兩個(gè)元素只有在同一BFC 內(nèi)，才有可能發(fā)生垂直外邊距的重疊，包括相鄰元素、嵌套元素。

===============================

要解決 margin 重疊問(wèn)題，只要讓它們不在同一個(gè) BFC 內(nèi)就行。

• 對(duì)于相鄰元素，只要給它們加上 BFC 的外殼，就能使它們的 margin 不重疊；
• 對(duì)于嵌套元素，只要讓父級(jí)元素觸發(fā) BFC（比如給父級(jí)加overflow：hidden)，就能使父級(jí) margin 和當(dāng)前元素的 margin 不重疊。

===============================

在沒(méi)有新建BFC時(shí)，邊距重疊了，margin-bottom + margin-top，應(yīng)該等于20

新建了BFC之后

上面的例子中，為了使兩個(gè)正方形的外邊距不重疊，就給其中一個(gè)div包裹一層container，觸發(fā)BFC。

注意: 邊距折疊的問(wèn)題可以用 BFC 來(lái)解決，但觸發(fā) BFC 并不是解決邊距折疊的充分條件，還要得到合理的運(yùn)用

原文地址：https://juejin.cn/post/6988877671606272031

作者：Axjy