本文已参与「新人创作礼」活动，一起开启掘金创作之路。
css盒模型一共有两种模型：W3C标准盒模型（标准模式）、IE盒模型（怪异模式）
只要完整定义DOCTYPE都会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式 （注意：缺失DOCTYPE下只有再ie6/7/8才会主动触发怪异模式，其他都是标准模式，除非手动修改了box-sizing）
标准模式：盒子总宽度=width+padding+border+margin
怪异模式：盒子总宽度=width(包含padding+border)+margin
说说css3的属性box-sizing吧，它有两个非常重要的值：
第一：content-box------------会采用标准模式解析计算（默认模式）
第二：border-box-------------会采用怪异模式解析计算
注意： 其他说的那个兼容问题大多数是 扯淡，都是拷贝的么，都不试试的么！
什么 margin: 0 auto; 会失效 ！！！
什么 行内元素设置宽高怪异模式下生效 ！！！
什么 怪异模式下图片padding失效 ！！！
什么 怪异模式下table内样式不能继承外部 ！！！
都是扯淡，差点信了你这鬼，坏得很！
看一下一些问题吧
（1）基本概念：content、padding、margin。
（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
（4）JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
（5）实例题：根据盒模型解释边距重叠。
前四个方面是逐渐递增，第五个方面，却鲜有人知。
（6）BFC（边距重叠解决方案）或IFC。
如果能回答第五条，就会引出第六条。BFC是面试频率较高的。
总结：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。
看一下问题答案吧： 1、2、3 上面都讲清楚了 看一下 4 方法一： 缺点： 只能获取行内样式，不能获取内嵌的样式和外链的样式
var dom = document.getElementId('id')
dom.width
方法二：（通用方式为了兼容IE）
window.getComputedStyle(dom).width;
getComputedStyle()是一个可以获取当前元素所有最终使用的CSS属性值的方法；兼容性很好。
方法三：
dom.getBoundingClientRect().width/height
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left,height,width,x,y共8个属性；兼容性很好。
**问题（5）**margin塌陷/margin重叠
只有在标准文档流中，而且是竖直方向的margin不叠加，只取较大的值作为margin
**问题（6）**BFC（边距重叠解决方案）
1.BFC的概念
BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。
另外还有个概念叫IFC。不过，BFC问得更多。
2.BFC 的原理/BFC的布局规则【非常重要】
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。
（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看举例1）
（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。（稍后看举例2）
（4）计算BFC的高度时，浮动的子元素也参与计算。（稍后看举例3）
3.如何生成BFC
有以下几种方法：
方法1：overflow: 不为vidible，可以让属性是 hidden、auto。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex
