前端面試CSS篇（一）CSS盒子模型、BFC塊級格式化上下文、清除浮動

1. 基本概念：標準模型和IE模型

2.兩者區別？

• 標準模型的 寬和高，就是content的寬和高，
• 低版本IE模型的寬和高，包括了padding和border的寬和高

3.css如何設置這兩種模型？

• box-sizing: content-boxl;   標準模型
• box-sizing:border-box;   低版本IE

4.js如何獲取設置和模型的寬和高？

•   4.1 dom.style.width/height   只能獲取行內樣式（style設置的）；
•   4.2 dom.currentStyle.width/height   css三種設置方式（行內，內部style，外聯link）都能獲取到，但是隻在IE環境下支持；
•   4.3 window.getComputedStyle(dom).width/height 均能獲取，各瀏覽器都兼容
•   4.4 dom.getBoundingClientRect().width/height

5.盒模型邊距重疊

•    兩個dom元素間的margin會重疊，以兩者大的值爲準
•    可通過 overflow: heidden; 消除

    BFC概念：塊級格式化上下文

    BFC原理：

•       1.BFC元素垂直方向邊距margin會發生重疊
•        2.BFC區域不會與浮動元素的box重疊（清除浮動）
•        3.BFC在頁面中是個獨立的元素，外邊的元素不會影響裏邊的元素，裏邊的元素不會影響外邊的元素
•        4.計算BFC高度時，也不參與計算

    如何創建BFC

•         1.overflow不爲visible;
•         2.float不爲none的；
•         3.position不爲static或者position的；
•         4.display 爲table相關的

    BFC使用場景：

        可用來清除浮動（BFC子元素即使是float，也會參與寬高計算）