題目：談談你對CSS盒模型的認識
首先要說出border margin padding content，還要說出標準模型+IE模型。
緊接著，面試官可能要問標準模型和IE模型的區別：寬度和高度的計算不同。
下面給出兩張圖片來看一下兩種模型的高度計算方式
回答出來後，面試官可能繼續追問CSS是如何設置這兩種模型的：
box-sizing: content-box; // 標準模型
box-sizing: border-box; // IE模型
再繼續追問的話就是，JS如何獲取對應盒模型的寬和高？
1.dom.style.width/height（僅限於DOM節點的行間樣式）
2.dom.currentStyle.width/height（拿到瀏覽器渲染完成之後即時運行的結果(相對準確)，瀏 覽器不管是設置的行間樣式還是樣式表或者style節點，缺點只有IE支持）
3.window.getComputedStyle(dom).width/height（2的兼容方式）
4.dom.getBoundingClientRect().width/height（可拿到瀏覽器即時運行完之後的準確結果，常用於計算元素相對於視窗左上角的絕對位置，可獲取4個結果top left width height）
最後，還有一個題目，可能給一個實例題（根據盒模型解釋邊距重疊）
題目中子元素高度100px(margin-top: 10px)，距離父元素上邊距10px，請給出父元素的高度？
其實這個題你說100px也對，說110px也對，要看父元素盒模型的設置方式。
給父元素設置overflow: hidden;則高度為110px，否則為100px。
那這又是為什麼呢？原因在於overflow: hidden；給父元素創建了BFC也就是塊級格式化上下文（其實還有一個IFC內聯元素的格式化上下文，此處不做介紹）
最後的最後還會有考察的知識點嗎？有的，那就是終極拔高的BFC（邊距重疊解決方案）
BFC基本概念：塊級格式化上下文
BFC原理：
1.BFC區域內垂直方向元素的邊距發生重疊
2.BFC的區域不會與浮動元素的box重疊
3.BFC在頁面上是一個獨立的容器，外面的元素不會影響它裡面的元素，反之亦然。
4.計算BFC高度的時候，浮動元素也參與計算
如何創建BFC：
1.float值不為none
2.position的值不是static和relative
3.display屬性值和table相關(inline-box table table-cell table-caption)
4.overflow的值不為visible
----------------------------------------------------------------------------------------------
看到這就結束了，各位小夥伴不留下一些意見嗎？哈哈哈
