CSS盒模型是前端的基石，這個問題由淺入深，由易到難，可以依次問出下面幾個問題

1.基本概念：標(biāo)準(zhǔn)模型 + IE模型
2.標(biāo)準(zhǔn)模型 和 IE模型的區(qū)別
3.CSS如何設(shè)置這兩種模型
4.JS如何設(shè)置和獲取盒模型對應(yīng)的寬和高
5.實例題（根據(jù)盒模型解釋邊距重疊）
6.BFC（邊距重疊解決方案）

1、基本概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

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

標(biāo)準(zhǔn)模型與 IE 模型的區(qū)別在于寬高的計算方式不同。標(biāo)準(zhǔn)模型計算元素的寬高只算 content 的寬高，IE模型是 content + padding + border 的總尺寸。假如 content 寬高是 100px，padding 為 10px，border為 10px，margin為10px，那么在標(biāo)準(zhǔn)模型下，這個元素的寬為 100px，高為 100px。IE模型下，寬為 100px + 210px(左右padding) + 210px(左右border) = 140px;高為 100px + 210px(上下padding) + 210px(上下border) = 140px;

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

//設(shè)置標(biāo)準(zhǔn)模型
box-sizing: content-box;
//設(shè)置IE模型
box-sizing: border-box;

4、JS如何設(shè)置盒模型的寬和高

假設(shè)已經(jīng)獲取的節(jié)點為 dom
//只能獲取內(nèi)聯(lián)樣式設(shè)置的寬高
dom.style.width/height

//獲取渲染后即時運行的寬高，值是準(zhǔn)確的。但只支持 IE
dom.currentStyle.width/height

//獲取渲染后即時運行的寬高，值是準(zhǔn)確的。兼容性更好
window.getComputedStyle(dom).width/height;

//獲取渲染后即時運行的寬高，值是準(zhǔn)確的。兼容性也很好，一般用來獲取元素的絕對位置，getBoundingClientRect()會得到4個值：left, top, width, height
dom.getBoundingClientRect().width/height;

5、BFC

什么是 BFC？Block Formatting Context（塊級格式化上下文）。
在解釋什么是BFC之前，我們需要先知道Box、Formatting Context的概念。

如何創(chuàng)建BFC

float的值不是none。
position的值不是static或者relative。
overflow的值不是visible。
display的值是inline-block、table-cell、flex、table-caption或者inline-flex。

BFC的作用
利用BFC避免margin重疊
自適應(yīng)兩欄布局
清除浮動