（二）前端面试：盒模型

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

（二）前端面试：盒模型

从途中可以看出，标准模型的宽高就是内容content部分的宽高。

（二）前端面试：盒模型

IE模型中的宽高包含padding（内边距）和border（边框），这是两者的区别所在。

标准模型 ==> IE模型：box-sizing: border-box;

IE模型 ==> 标准模型：box-sizing: content-box;

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()方法返回的数据如下：

（二）前端面试：盒模型

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可以阻止元素被浮动元素覆盖，创建自适应两栏布局，左边宽度固定，右边自适应宽度

此处省略...