本篇文章給大家分享6個關(guān)于CSS盒模型的面試題，查漏補缺，看看這六個面試題你能答對幾個靠汁？是否可以全部答對？
對于前端面試來說闽铐，css盒模型肯定是必考必問的前端知識點蝶怔，因為這是CSS基石中非常重要的內(nèi)容，而且它關(guān)聯(lián)的知識也非常多兄墅，那面試中一般都是如何層層遞進的提問呢添谊？下面一起來看看吧！
1察迟、談?wù)勀銓SS盒模型的認識斩狱？
問題簡答
所有 HTML 元素都可以視為方框。在 CSS 中扎瓶，在談?wù)撛O(shè)計和布局時所踊，會使用術(shù)語“盒模型”或“框模型”。CSS 框模型實質(zhì)上是一個包圍每個 HTML 元素的框概荷。
它包括：
- 外邊距 → margin
- 邊框 → border
- 內(nèi)邊距 → padding
- 實際的內(nèi)容 → content
它有標(biāo)準(zhǔn)模型和IE模型兩種秕岛；
知識解析
盒模型，英文box model误证。
- 無論是div继薛、span、還是a都是盒子愈捅。
- 圖片遏考、表單元素一律看作是文本，它們并不是盒子蓝谨，因為一張圖片里面并不能放東西灌具，它自己就是自己的內(nèi)容青团。
盒模型各部分說明：
- Margin(外邊距) ：清除邊框外的區(qū)域，外邊距是透明的（可以為負值）咖楣。
- Border(邊框) ：圍繞在內(nèi)邊距和內(nèi)容外的邊框督笆。
- Padding(內(nèi)邊距) ：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的（不允許負值）诱贿。
- Content(內(nèi)容) ：盒子的內(nèi)容娃肿，顯示文本和圖像。
2珠十、標(biāo)準(zhǔn)模型和IE模型的區(qū)別咸作？
問題簡答
標(biāo)準(zhǔn)模型和ie模型的區(qū)別是計算寬width高height的不同。
- 標(biāo)準(zhǔn)模型width不計算padding和border宵睦；
- ie模型width計算padding 和border记罚；
知識解析
標(biāo)準(zhǔn)盒模型（W3C盒子模型）
設(shè)置的寬高是對實際內(nèi)容content的寬高進行設(shè)置，內(nèi)容周圍的border和padding另外設(shè)置;
即元素實際占位的寬高為：
width【height】= 設(shè)置的content的寬【高】 + padding + border + margin
可以通過實例來理解：寫一個div壳嚎，同時設(shè)置了寬、高说庭、邊框郑趁、內(nèi)邊距、外邊距捆憎；
//注：如果下面示例未寫html和css,說明與此處相同
.box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px;
margin: 40px;
background: #66FFFF;
}
<div class="box">Axjy</div>
效果及Chrome的開發(fā)者工具中顯示的盒模型如下：
可以看到content部分即為100×100梭纹，內(nèi)容周圍都是另外設(shè)置的，width=40+10+30+100+30+10+40=180础拨；
IE盒子模型（怪異盒模型）
設(shè)置的寬高是對實際內(nèi)容content + 內(nèi)邊距（padding）+邊框（border）之和的width和height進行設(shè)置的;
即元素實際占位的寬高為：
width（height）= 設(shè)置的width（height）+外邊距margin
和上面使用同樣的例子诡宗，但是通過設(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的開發(fā)者工具中顯示的盒模型如下：
可以很明顯的看到芳悲，正方形和上面的比小了一圈边坤，width=40+10+30+20+30+10+40=100;
3、CSS如何設(shè)置這兩種模型肮韧？
問題簡答
上面的示例其實已經(jīng)用到了這個設(shè)置
- css設(shè)置標(biāo)準(zhǔn)模型：Box-sizing:context-box (也是瀏覽器默認的盒模型)旺订；
- css設(shè)置Ie模型：
box-sizing:border-box;
4、JS如何設(shè)置/獲取盒模型對應(yīng)的寬和高拘领？
問題簡答
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【常用】
知識解析
1樱调、dom.style.width/height
通過dom節(jié)點的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è)置寬高時
獲取的寬高為空
在行內(nèi)設(shè)置寬高時
獲取的是行內(nèi)設(shè)置的寬高
element.style.xxx 這種只能取得內(nèi)嵌樣式的屬性笆凌，獲取樣式能讀能寫
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()方法,
- 第一個參數(shù)：取得計算樣式的元素眉撵；
- 第二個參數(shù)：一個偽元素字符串（例如“:after”），如果不需要偽元素信息落塑，默認為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)
『小擴展』
如果box類不設(shè)置寬高，而是由內(nèi)容自動撐開憾赁；
則標(biāo)準(zhǔn)盒模型通過getComputedStyle獲取到的寬高是content的值污朽；
IE盒模型通過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é)果妙真；
『小擴展』
如果box類不設(shè)置寬高，而是由內(nèi)容自動撐開锈候；
不論是哪種模型泵琳，獲取到的都是（border + padding + content)谷市，不包括外邊距迫悠；
getBoundingClientRect還可以取到相對于視窗的上下左右的距離（用于獲取某個元素相對于視窗的位置集合）甫男。
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é)果蜡秽；
小擴展
如果box類不設(shè)置寬高试浙，而是由內(nèi)容自動撐開田巴；
不論是哪種模型，獲取到的都是（border + padding + content)艘刚，不包括margin箩朴；
從上面可以看出炸庞，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 結(jié)果是一樣的
5、根據(jù)盒模型解釋邊距重疊
問題簡答
外邊距重疊是指兩個【垂直】 【相鄰】的塊級元素拐格，當(dāng)上下兩個邊距相遇時捏浊，其外邊距會產(chǎn)生重疊現(xiàn)象金踪，且重疊后的外邊距胡岔，等于其中較大者。（水平方向不會發(fā)生）
『原因』
根據(jù)W3C文檔的說明怨咪，當(dāng)符合以下條件時诗眨，就會觸發(fā)外邊距重合
- 都是普通流中的元素且屬于同一個 BFC
- 沒有被 padding巍膘、border峡懈、clear 或非空內(nèi)容隔開
- 兩個或兩個以上垂直方向的「相鄰元素」
相鄰元素包括父子元素和兄弟元素
『重疊后的margin計算』
1逮诲、margin都是正值時取較大的margin值
2、margin都是負值時取絕對值較大的冗锁，然后負向位移冻河。
3、margin有正有負堪澎，從負值中選絕對值最大的钮呀，從正值中選取絕對值最大的爽醋，然后相加
邊距重疊詳解及解決方案
1蚂四、嵌套塊（父子）元素垂直外邊距的合并
對于兩個嵌套關(guān)系的塊元素田度，如果父元素沒有padding-top及border镇饺，則父元素的margin-top會與子元素的margin-top發(fā)生合并，合并后的外邊距為兩者中的較大者监右，即使父元素的上外邊距為0健盒，也會發(fā)生合并扣癣。
『解決辦法』
- 1、為父元素定義1px的border-top或padding-top士嚎。
- 2莱衩、為父元素添加overflow:hidden笨蚁。
- 3赚窃、子元素或父元素設(shè)置display:inline-block。
- 4辱匿、父元素加前置內(nèi)容（::before）生成。（推薦）
『示例』
在頁面放兩個正方形
<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)該是父級元素沒有邊距，子元素頂部和父元素頂部之間的距離為20
實際效果：父子盒子重疊席里，父級與外面的間隔變成了20（會取較大的值奖磁，因為父級為0咖为，所以取的是子級的margin）
通過上面的解決辦法處理之后
方法一、二麻养、三
方法四
.parent-box::before {
content : "";
display :table;
}
達到的效果
2、相鄰塊（兄弟）元素垂直外邊距的合并（外邊距塌陷）
當(dāng)上下相鄰的兩個塊元素相遇時许昨，如果
- 上面的元素有下外邊距margin-bottom糕档，
- 下面的元素有上外邊距margin-top速那，
則他們之間的垂直間距不是margin-bottom與margin-top之和端仰，而是兩者中的較大者吱七。
『解決辦法』
1）為了達到想要的間距踊餐，最好在設(shè)置margin-top/bottom值時統(tǒng)一設(shè)置上或下吝岭；
2）或者用以下的BFC解決苍碟，下面有詳解
6微峰、談?wù)凚FC
BFC的基本概念
BFC全稱為塊格式化上下文 (Block Formatting Context) ，是 Web 頁面中盒模型布局的 CSS 渲染模式仗扬，指一個獨立的渲染區(qū)域或者說是一個隔離的獨立容器蕾额。
BFC的通俗理解：首先BFC是一個名詞退个，就是一個有特定規(guī)則的區(qū)域语盈。我們可以理解為一個箱子（實際上是看不見摸不著的）刀荒，箱子里面物品的擺放是不受外界的影響的缠借。
W3C 規(guī)范對此作了詳細的描述：
浮動元素和絕對定位元素泼返，非塊級盒子的塊級容器（例如
inline-blocks,table-cells, 和table-captions）趴捅，以及overflow值不為visiable的塊級盒子拱绑，都會為他們的內(nèi)容創(chuàng)建新的 BFC（塊級格式上下文）丽蝎。在 BFC 中屠阻，盒子從頂端開始垂直的一個接一個排列吧恃，兩個盒子之間的垂直間距由他們的
margin值決定痕寓，在同一個 BFC 中呻率，兩個相鄰塊級盒子的垂直外邊距會產(chǎn)生折疊。在 BFC 中逻悠，每一個盒子的左外邊緣會觸碰到容器的左邊緣卢厂，對于從右到左的格式來說，則觸碰到右邊緣撵渡。即使在浮動里也是這樣的（盡管一個盒子的
line boxes會因為浮動而收縮）趋距，除非這個盒子的內(nèi)部創(chuàng)建了一個新的 BFC（由于浮動外盯，在這種情況下盒子本身將會變得更窄）
BFC的布局規(guī)則（原理/渲染規(guī)則）
- 計算BFC高度時饱苟，浮動元素也會參與計算（清除浮動）
- BFC的區(qū)域不會與浮動元素的box重疊箱熬。（防止浮動文字環(huán)繞）
- BFC在頁面上是一個獨立的容器，內(nèi)外元素不相互影響糕伐。（解決外邊距重疊問題）
- Box垂直方向的距離由margin決定良瞧。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊莺褒。
下面的使用場景會通過這些規(guī)則來處理一些實際的問題。
如何創(chuàng)建BFC
括號里面是一些副作用
- 浮動元素：float:left | float:right;【會導(dǎo)致父元素的寬度丟失,也會導(dǎo)致下邊的元素上移】
- 定位元素：position:absolute | position:fixed尘执；
- display的一些值：display:inline-block【轉(zhuǎn)為行內(nèi)塊會導(dǎo)致寬度丟失】 | display:flex | display:table | table-cell、table-caption丧靡、inline-table温治、inline-flex、grid卤恳、inline-grid若债；
- overflow值不為visible：overflow:hidden;【將會剪切掉溢出的元素】 | overflow:auto拆座、overflow:scroll;
- display:flow-root【新屬性，BFC創(chuàng)建新方式躏碳，沒有任何副作用，注意瀏覽器兼容】
『注意』
display:table也可以生成BFC的原因在于Table會默認生成一個匿名的table-cell咬最，是這個匿名的table-cell生成了BFC翅雏。
并不是任意一個元素都可以被當(dāng)做BFC望几，只有當(dāng)這個元素滿足以上任意一個條件的時候，這個元素才會被當(dāng)做一個BFC
BFC的使用場景
1、清除浮動
浮動的元素會脫離普通文檔流，如下,父級容器只剩下2px的邊距高度躺同。
利用overflow: hidden給父級創(chuàng)建BFC之后
以上方法可以實現(xiàn)清楚浮動阁猜，但是還是推薦使用偽類的方式。
為什么要清除浮動? 浮動塌陷,包含塊沒有設(shè)置高度或者是自適應(yīng)的時候蹋艺、包含塊就不能撐起來剃袍，變成塌陷的狀態(tài)。
2捎谨、防止浮動文字環(huán)繞
有如下文字環(huán)繞效果：
brother-box有部分被浮動元素所覆蓋（文本信息不回被浮動元素覆蓋）民效，如果想避免元素被覆蓋，可利用創(chuàng)建BFC的方法涛救，如給brother-box加overflow: hidden舒萎，則可得到以下效果
『理由』上面的規(guī)則二：BFC的區(qū)域不會與浮動元素的box重疊
這個方法可以用來實現(xiàn)兩列自適應(yīng)布局咆贬，左邊的寬度固定御毅，右邊的內(nèi)容自適應(yīng)寬度今豆。
3、利用BFC解決邊距重疊問題
根據(jù)前面的邊距重合條件來看酝润，想要解決邊距重疊疏咐，只需要破壞其中的某個觸發(fā)條件即可，比如創(chuàng)建一個BFC。
根據(jù) BFC 的定義，兩個元素只有在同一BFC 內(nèi)，才有可能發(fā)生垂直外邊距的重疊，包括相鄰元素、嵌套元素。
===============================
要解決 margin 重疊問題鸿市，只要讓它們不在同一個 BFC 內(nèi)就行冯遂。
- 對于相鄰元素，只要給它們加上 BFC 的外殼炒俱，就能使它們的 margin 不重疊；
- 對于嵌套元素，只要讓父級元素觸發(fā) BFC（比如給父級加overflow：hidden)师妙，就能使父級 margin 和當(dāng)前元素的 margin 不重疊。
===============================
在沒有新建BFC時，邊距重疊了米酬，margin-bottom + margin-top，應(yīng)該等于20
新建了BFC之后
上面的例子中照瘾，為了使兩個正方形的外邊距不重疊软吐，就給其中一個div包裹一層container，觸發(fā)BFC吮蛹。
注意: 邊距折疊的問題可以用 BFC 來解決，但觸發(fā) BFC 并不是解決邊距折疊的充分條件刚照，還要得到合理的運用
原文地址：https://juejin.cn/post/6988877671606272031
作者：Axjy
本文轉(zhuǎn)載自：https://www.php.cn/css-tutorial-480644.html
更多編程相關(guān)知識颜价，請訪問：編程入門！靖避！
