1. 基本概念
完整定義DOCTYPE會觸發標準模式，如果DOCTYPE缺失則在ie6/ie7/ie8下將會觸發怪異模式。
（W3C）標準模型
一個塊的寬度 = width(content寬度)+padding(內邊距)+border(邊框)+margin(外邊距)；
（怪異）IE模型
一個塊的寬度 = width(content寬度+內邊距+邊框)+margin(外邊距) （即怪異模式下，width包含了border以及padding）;
2. 標準模型和IE模型的區別
標準盒子模型中，盒子的width是指content寬度，但IE盒子模型中，width包含了content、border和padding的寬度。
即主要區別在於width和height的計算方式的不同
標準盒子模型：盒子的總寬度 = width + padding + border + margin
width = content的寬度
IE 盒子模型 : 盒子的總寬度 = width + margin
width = content的寬度 + padding內邊距(左右) + border邊框寬度(左右)
（高度以此類推）
3. CSS如何設置這兩種模型
- box-sizing:content-box; 標準模型（瀏覽器默認）
- box-sizing:border-box; IE模型
4. JS如何設置獲取盒模型對應的寬和高
- dom.style.width/height（只能獲取內聯樣式的寬高）
- dom.currentStyle.width/height（渲染顯示的寬高，只支持IE瀏覽器）
- window.getComputedStyle(dom).width/height（兼容主流瀏覽器，通用性好）
- dom.getBoundingClientRect().width/height/left/top（計算元素的絕對位置，視窗的左上交爲頂點）
5. BFC（邊距重疊解決方案）
BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。
原理規則：
- 不會讓垂直方向的邊距發生重疊；
- BFC的區域不會與浮動元素髮生重疊；
- BFC在頁面上是獨立容器，其裏面的元素與外面元素互不影響；
- 計算BFC高度時，浮動元素也會參與計算；
如何創建BFC：
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table、table-cell、table-caption、flex、inline-flex
- overflow的值不是visible
使用場景：
解決高度塌陷問題------鏈接
還有一種IFC爲"內聯格式化上下文"，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來的。
（本文純屬個人學習筆記，如有不足請留言！）