我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。
1、基本概念：標准模型+IE模型、標准模型 與 IE模型區別
（1）W3C定義的盒子模型包括margin、border、padding、content ，元素的width=content的寬度
（2）IE盒子模型與W3C的盒子模型唯一區別就是元素的寬度，元素的width=content+padding+border
2、CSS是如何設置這兩種模型
box-sizing： content-box （瀏覽器默認方式）類似於W3C定義的盒模型 content = width；
box-sizing： border-box 類似於IE定義的盒模型 content = width + border + padding；
3、JS如何設置獲取盒模型對應的寬和高
dom.style.width/height //內聯樣式才可以
dom.currentStyle.width/height //僅IE支持 原理是渲染后的元素的寬高相對來說比較准確
window.gteComputedStyle(dom).width/height //兼容Firefox與Chrome 原理跟上面的一樣，所有瀏覽器都支持
dom.getBoundingClientRect().width/height
//dom.getBoundingClientRect() 函數返回一個Object對象，該對象有6個屬性：top,lef,right,bottom,width,height；
4、實例題（根據盒模型介紹邊距重疊）
邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成一個單一邊界。
兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會重合的。
5、BFC（布局邊距重疊解決方案）
基本概念(原理)：BFC(Block formatting context)直譯為"塊級格式化上下文"
原理/特性/渲染規則：
- 處於同一個BFC中的元素相互影響，可能會發生margin collapse(邊距坍塌&邊距重疊)；
- BFC在頁面上是一個獨立的容器，容器里面的子元素不會影響到外面的元素，反之亦然；
- 計算BFC的高度時，考慮BFC所包含的所有元素，包括浮動元素也參與計算；
- 浮動盒的區域不會疊加到BFC上；
創建：怎么創建或者說哪些元素會生成BFC?
1. float屬性不為none
3. position為absolute或fixed
4. display為inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不為visible
使用場景：
1、利用BFC可以閉合浮動
2、防止與浮動元素重疊
3、由於BFC的隔離作用，可以利用BFC包含一個元素，防止這個元素與BFC外的元素發生margin collapse。