题目：谈谈你对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
----------------------------------------------------------------------------------------------
看到这就结束了，各位小伙伴不留下一些意见吗？哈哈哈
