（二）前端面试：盒模型

文章内容参考自《前端跳槽面试必备技巧》 

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

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（Block formatting context） 块级格式化上下文。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，也不会受外部元素的影响。

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

详情请见：https://zhuanlan.zhihu.com/p/25321647

6.IFC(Inline formatting context) 内联格式化上下文

此处省略...