题目：谈谈你对css盒模型的认识
1、基本概念：标准模型＋ie模型
2、标准模型和IE模型的区别
3、css如何设置这两种模型
4、js如何设置获取盒模型对应的宽和高
5、实例题 (根据盒模型解释边距重叠)
6、bfc (边距重叠解决方案)
一、基本概念和区别
如图，看到宽度和高度，他所指的内容，标准模型和ie模型的区别就是，宽度，高度的计算方式不同，标准模型的宽度指的就是content的宽度，不包括padding和border，而ie模型是计算padding和border的。
二、css如何设置这两种模型
box-sizing:content-box;(浏览器默认的方式)
box-sizing:border-box;
三、js如何设置获取盒模型的宽和高
dom.style.width/height
这个宽和高是否就能够取到所有盒模型的宽和高呢，显然不是，这种方式能取到的是盒模型的内联属性（css的三种方式：内嵌，<style> <link>），这种方式只能拿到第一种,这是它的局限性
dom.currentStyle.width/height
这个是拿到浏览器即时运行后的结果，也就是说不管通过内嵌，style，link设置的宽高，这个最终拿到的是渲染以后的宽和高，这个是相对来说比较准确的，但是有一个缺点，这个属性只有ie支持（这是致命的缺点）
window.getComputedStyle(dom).width/height
这个是兼容firefox和chrome的，所以2和3的区别，下面的通用性好一些，原理都是相似的
dom.getBoundingClientRect().width/height
这个也能拿到元素的真实宽高，那么这个元素的作用是什么呢，就是计算元素的绝对位子，所以这个拿到的是4个元素，top,left,width,height,所以这个也能拿到
四、实例题
如图，问父元素的高度是100还是110，理论上都可以，最终取决于它的盒模型是怎么样的
<!--box.html--> <body> <section id="sec"> <style> #sec{ background: red; } .child{ height: 100px; margin-top: 10px; background: yellow } </style> <article class="child"></article> </section> </body>
此时的盒模型的高度是100，如果把#sec样式加一个overflow，发现盒模型的高度变成了110
为什么呢？现在的这个情况是父子元素边距重叠，取最大值的原则，这里通过对父元素加一个hidden，也就相当于给父元素创建了一个bfc，也就是块级格式化上下文，那么什么是bfc呢
五、BFC(边距重叠解决方案)
1、BFC的基本概念：块级格式化上下文
2、BFC的原理（说白了就是BFC的渲染规则）：
这个规则是什么呢？我觉得大家能说出4点就够了
第一个就是BFC这个元素的垂直的边距会发生重叠
第二个是BFC的区域不会与浮动元素的box重叠，这个肯定是用来清除浮动的。
第三个， BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反过来，里面的元素也不会影响到外面到元素。
第四个就是计算BFC高度的时候，浮动元素也会参与计算
3、怎么创建BFC
刚才给父元素加了一个 overflow:hidden就创建了一个BFC，那么除了overflow:hidden，还有哪些写法能创建BFC呢？
第一个是float的值不为none，因为css的float值默认是none，只要设置了浮动就创建了BFC
第二个是position的值不是static或者relative，也就是创建了一个bfc，比如设置成absolute,fixed
第三个是display属性是inline-box或者table-cell，跟table相关的这几个，就创建了BFC
第四个是overflow,overflow为auto,hidden，都可以创建BFC
4、BFC的使用场景有哪些？
下一章