這些是我自己在學(xué)習(xí)過程中總結(jié)的一些知識點，本篇文章我將以面試題的形式分享給大家，希望對大家有所幫助，本文篇幅較長，您若認(rèn)真看完，并且反復(fù)閱讀，我相信對您的學(xué)習(xí)或者是面試，都會有一定幫助，同時希望大家批評指正！

1. 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

盒子模型就是 元素在網(wǎng)頁中的實際占位，有兩種：標(biāo)準(zhǔn)盒子模型和IE盒子模型

標(biāo)準(zhǔn)(W3C)盒子模型：內(nèi)容content+填充padding+邊框border+邊界margin

寬高指的是 content 的寬高

低版本IE盒子模型：內(nèi)容（content+padding+border）+ 邊界margin，

寬高指的是 content+padding+border 部分的寬高

專題推薦：2020年CSS面試題匯總（最新）

問題的拓展：

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

box-sizing : content-box   box-sizing : border-box復(fù)制代碼

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

dom.style.width/height;//設(shè)置獲取的是內(nèi)聯(lián)樣式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//適用場所：計算一個元素的絕對位置復(fù)制代碼

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

該例子是父子邊距重疊，還有兄弟元素的邊距重疊

<style>             html *{                     padding: 0;                     margin: 0;             }             #sec{                     background: #f00;                     overflow: hidden; //創(chuàng)建了一個BFC，塊級格式化上下文        }             .child{                     height: 100px;                     margin-top: 10px;                     background: yellow;             }     </style> <section id="sec">             <article class="child"></article>     </section>復(fù)制代碼

BFC（邊距重疊解決方案）？

2. box-sizing屬性？

用來控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：W3C的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是 content 部分的高/寬
border-box：IE 傳統(tǒng)盒子模型。設(shè)置元素的 height/width 屬性指的是 content + border + padding 部分的高/寬

3. 對 BFC 規(guī)范(塊級格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 規(guī)范中的一個概念,它是一個獨立容器，決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。）

一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。

不同類型的 Box，會參與不同的 Formatting Context（決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染，也就是說BFC內(nèi)部的元素和外部的元素不會互相影響。

BFC 規(guī)定了內(nèi)部的 Block Box 如何布局。

定位方案：

1. 內(nèi)部的 Box 會在垂直方向上一個接一個放置。
2. Box 垂直方向的距離由 margin 決定，屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發(fā)生重疊。
3. 每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。
4. BFC 的區(qū)域不會與 float box 重疊。
5. BFC 是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
6. 計算 BFC 的高度時，浮動元素也會參與計算。

滿足下列條件之一就可觸發(fā) BFC

1. 根元素，即 html
2. float 的值不為none（默認(rèn)）
3. overflow 的值不為 visible（默認(rèn)）
4. display 的值為 inline-block、table-cell、table-caption
5. position 的值為 absolute 或 fixed