盒模型是前端最基礎的一部分了，需要熟練掌握。

1.標準模型

從途中可以看出，標準模型的寬高就是內容content部分的寬高。

2.IE模型

IE模型中的寬高包含padding（內邊距）和border（邊框），這是兩者的區別所在。

3.標準模型與IE模型之間的轉換

標準模型 ==> IE模型 ：box-sizing: border-box;

IE模型 ==> 標準模型 ：box-sizing: content-box;

4.js獲取盒模型的寬高

1) dom.style.width/height;

注：只能獲取行內樣式的寬高

2) dom.currentStyle.width/height;

注：獲取頁面渲染後dom的寬高，比方式一好，但只支援IE

3) window.getComputedStyle(dom).width/height;

注：常用的一種方式，效果好

4) dom.getBoundingClientRect().width/height;

注：此方法獲取的寬高包含了padding和border，一般用於獲取元素的位置，getBoundingClientRect()方法返回的資料如下：

5.BFC(Block formatting context) 塊級格式化上下文

BFC是一種邊距重疊的解決方案，比如我們在寫程式碼的時候會發現左右或者上下兩個元素都設有邊距，但往往出現邊距之間去最大值作為兩個元素之間的邊距，而不是取兩者的邊距和。

如何建立BFC ?

1）float不為none

2）position設定為absolute，fixed

3）display設定為table-cell，table-caption，inline-block, flex, inline-flex

4）overflow設定為除了visible以外的值，即hidden，auto，scroll

5）body根元素

BFC的應用：

1）BFC可以包含浮動的元素，清除浮動只需要將父元素變成一個BFC即可，常用的方法是給父元素設定overflow:hidden

2）同一BFC下外邊距會發生合併，若想避免外邊距合併，可以將其放在不同的BFC容器中

3）BFC可以阻止元素被浮動元素覆蓋，建立自適應兩欄佈局，左邊寬度固定，右邊自適應寬度

6.IFC(Inline formatting context) 內聯格式化上下文

此處省略...