分享6個關於CSS盒模型的面試題，你能答對幾個？

這篇文章跟大家分享6個關於CSS盒子模型的面試題，查漏補缺，看看這六個面試題你能答對幾個？是否可以全部答對？

對於前端面試來說，css盒子模型肯定是必考必問的前端知識點，因為這是CSS基石中非常重要的內容，而且它關聯的知識也非常多，那面試中一般都是如何層層遞進的提問呢？下面一起來看看吧！

1、談談你對CSS盒模型的認識？

問題簡答

所有 HTML 元素都可以視為方框。在 CSS 中，在談論設計和佈局時，會使用術語「盒子模型」或「框架模型」。 CSS 框模型實質上是一個包圍每個 HTML 元素的框框。

它包括：

• 外邊邊距→ margin
• 邊框→ border
• 內邊距→ padding
• 實際的內容→ content

它有標準模型和IE模型兩種；

#知識解析

盒模型，英文box model。

• #無論是div、span、或a都是盒子。
• 圖片、表單元素一律看作是文本，它們並不是盒子，因為一張圖片裡面並不能放東西，它自己就是自己的內容。

盒子模型各部分說明：

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

2、標準模型和IE模型的差別？

問題簡答

標準模型和ie模型的差異是計算寬width高height的不同。

• 標準模型width不計算padding和border；
• ie模型width計算padding 和border;

知識解析

標準盒模型（W3C盒子模型）

設定的寬高是對實際內容content的寬高進行設置，內容周圍的border和padding另外設置;

即元素實際佔位的寬高為：

width【height】= 設定的content的寬【高】 padding border margin

可以透過實例來理解：寫一個div，同時設定了寬、高、邊框、內邊距、外邊距；

//注：如果下面示例未写html和css,说明与此处相同 .box { width: 100px; height: 100px; border: 10px solid #CC9966; padding: 30px; margin: 40px; background: #66FFFF; } 
Axjy

效果及Chrome的開發者工具中顯示的盒子模型如下：

可以看到content部分即為100× 100，內容周圍都是另外設定的，width=40 10 30 100 30 10 40=180;

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

設定的寬高是對實際內容content 內邊距（padding） 邊框（border）之和的width和height進行設定的;

即元素實際佔位的寬高為：

width（height）= 設定的width（height） 外邊距margin

#和上面使用同樣的例子，但是透過設定box-sizing:border-box;，把它變成IE盒模型；

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

效果及Chrome的開發者工具中顯示的盒子模型如下：

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

3、CSS如何設定這兩種模型？

問題簡答

上面的範例其實已經用到這個設定

• css設定標準模型：Box-sizing:context-box (也是瀏覽器預設的盒子模型);
• css設定Ie模型：box-sizing:border-box##;

#4、JS如何設定/取得盒模型對應的寬度與高度？

問題簡答

1) dom.style.width/height【只能取到内联元素】 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

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

使用類別設定寬高時

在行内设置宽高时

获取的是行内设置的宽高

element.style.xxx 这种只能取得内嵌样式的属性，获取样式能读能写

2、dom.currentStyle.width/height

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高,只有IE兼容

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

element.currentStyle[xxx] 可以取得内部和外部样式，但是只兼容ie浏览器，获取的样式只能读

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

取到的是最终渲染后的宽和高，如果有设置宽高，则不论哪种盒模型获取到的都是设置的宽高，和currentStyle相同，但是兼容性更好，IE9 以上支持。

getComputedStyle()方法,

• 第一个参数：取得计算样式的元素；
• 第二个参数：一个伪元素字符串（例如“: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类不设置宽高，而是由内容自动撑开；

则标准盒模型通过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)

标准模型，宽高设置为100的结果，额外包括了padding和border的值；

IE模型，宽高设置为100的结果；

『小扩展』

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括外边距；

getBoundingClientRect还可以取到相对于视窗的上下左右的距离（用于获取某个元素相对于视窗的位置集合）。

5、dom.offsetWidth/offsetHeight（常用）

包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

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

标准模型，宽高设置为100的结果；

IE模型，宽高设置为100的结果；

小扩展

如果box类不设置宽高，而是由内容自动撑开；

不论是哪种模型，获取到的都是（border + padding + content)，不包括margin；

从上面可以看出，dom.getBoundingClientRect().width/height 和 dom.offsetWidth/offsetHeight 结果是一样的

5、根据盒模型解释边距重叠

问题简答

外边距重叠是指两个【垂直】 【相邻】的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。（水平方向不会发生）

『原因』

根据W3C文档的说明，当符合以下条件时，就会触发外边距重合

• 都是普通流中的元素且属于同一个 BFC
• 没有被 padding、border、clear 或非空内容隔开
• 两个或两个以上垂直方向的「相邻元素」

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

『重叠后的margin计算』

• 1、margin都是正值时取较大的margin值

• 2、margin都是负值时取绝对值较大的，然后负向位移。

• 3、margin有正有负，从负值中选绝对值最大的，从正值中选取绝对值最大的，然后相加

边距重叠详解及解决方案

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

对于两个嵌套关系的块元素，如果父元素没有padding-top及border，则父元素的margin-top会与子元素的margin-top发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

『解决办法』

• 1、为父元素定义1px的border-top或padding-top。
• 2、为父元素添加overflow:hidden。
• 3、子元素或父元素设置display:inline-block。
• 4、父元素加前置内容（::before）生成。（推荐）

『示例』

在页面放两个正方形

父元素margin-top设为0，子元素设置20px;

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

预期效果：应该是父级元素没有边距，子元素顶部和父元素顶部之间的距离为20

实际效果：父子盒子重叠，父级与外面的间隔变成了20（会取较大的值，因为父级为0，所以取的是子级的margin）

通过上面的解决办法处理之后

方法一、二、三

方法四

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

达到的效果

2、相邻块（兄弟）元素垂直外边距的合并（外边距塌陷）

当上下相邻的两个块元素相遇时，如果

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

则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

『解决办法』

1）为了达到想要的间距，最好在设置margin-top/bottom值时统一设置上或下；

2）或者用以下的BFC解决，下面有详解

6、谈谈BFC

BFC的基本概念

BFC全称为块格式化上下文 (Block Formatting Context) ，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的通俗理解：首先BFC是一个名词，就是一个有特定规则的区域。我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。

W3C 規格對此作了詳細的描述：

• 浮動元素和絕對定位元素，非區塊級盒子的區塊級容器（例如inline-blocks,table-cells, 和table-captions），以及overflow值不為visiable的區塊級盒子，都會為他們的內容建立新的BFC（區塊級格式上下文）。

• 在BFC 中，盒子從頂端開始垂直的一個接一個排列，兩個盒子之間的垂直間距由他們的margin值決定，在同在一個BFC 中，兩個相鄰塊級盒子的垂直外邊距會產生折疊。

• 在 BFC 中，每個盒子的左外邊緣會碰到容器的左邊緣，對於從右到左的格式來說，則觸碰到右邊緣。即使在浮動裡也是這樣的（儘管一個盒子的line boxes會因為浮動而收縮），除非這個盒子的內部創建了一個新的BFC（由於浮動，在這種情況下盒子本身將會變得更窄）

BFC的佈局規則（原理/渲染規則）

1. 計算BFC高度時，浮動元素也會參與計算（清除浮動）
2. BFC的區域不會與浮動元素的box重疊。 （防止浮動文字環繞）
3. BFC在頁面上是一個獨立的容器，內外元素不互相影響。 （解決外邊距重疊問題）
4. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

下面的使用情境會透過這些規則來處理一些實際的問題。

如何建立BFC

#括號裡面是一些副作用

• 浮動元素：float:left | float:right;【會導致父元素的寬度丟失,也會導致下邊的元素上移】
• 定位元素： position:absolute | position:fixed;
• display的一些值：display:inline-block【轉為行內區塊會導致寬度遺失】 | 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建立新方式，沒有任何副作用，注意瀏覽器相容】

『注意』

display:table也可以產生BFC的原因在於Table會預設產生一個匿名的table-cell，是這個匿名的table-cell生成了BFC。

不是任意一個元素都可以被當做BFC，只有當這個元素滿足以上任一條件的時候，這個元素才會被當做一個BFC

BFC的使用場景

1、清除浮動

浮動的元素會脫離普通文檔流，如下,父級容器只剩下2px的邊距高度。

利用overflow: hidden給父級建立BFC之後

以上方法可以實現清楚浮動，但是還是建議使用偽類的方式。

為什麼要清除浮動?浮動塌陷,包含區塊沒有設定高度或是自適應的時候、包含區塊就不能撐起來，變成塌陷的狀態。

2、防止浮動文字環繞

#有以下文字環繞效果：

brother-box有部分被浮動元素所覆蓋（文字訊息不回被浮動元素覆蓋），如果想避免元素被覆蓋，可利用創建BFC的方法，如給brother-box加overflow: hidden，則可得到下列效果

『理由』上面的規則二：BFC的區域不會與浮動元素的box重疊

這個方法可以用來實現兩列自適應佈局，左邊的寬度固定，右邊的內容自適應寬度。

3、利用BFC解決邊距重疊問題

根據前面的邊距重合條件來看，想要解決邊距重疊，只需要破壞其中的某個觸發條件即可，例如建立BFC。

根據 BFC 的定義，兩個元素只有在同一BFC 內，才有可能發生垂直外邊距的重疊，包含相鄰元素、巢狀元素。

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

要解決margin 重疊問題，只要讓它們不在同一個BFC 內就行。

• 對於相鄰元素，只要給它們加上BFC 的外殼，就能使它們的margin 不重疊；
• 對於嵌套元素，只要讓父級元素觸發BFC（例如為父級加overflow：hidden)，就能讓父級margin 和目前元素的margin 不重疊。

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

#在沒有新建BFC時，邊距重疊了，margin-bottom margin-top，應該等於20

#新建了BFC之後

# #上面的例子中，為了讓兩個正方形的外邊距不重疊，就給其中一個div包裹一層container，觸發BFC。

以上是分享6個關於CSS盒模型的面試題，你能答對幾個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！