问题
1、请谈谈你对盒模型的认识 2、Bootstrap默认全局使用什么盒模型 2、你知道盒模型模型有哪些(2种)？【W3C盒子模型（标准模型盒）、IE盒子模型】
Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。
絮叨
你以为盒模型知识点很简单？稍微了解多一点，都会觉得，这些知识点都是真的多。
解答
我们先来看一个最普通的盒子模型张什么样子：
（图来自网络）
一个盒子由四个部分组成：conent, padding, border, margin
虽说有两种标准（标准，IE），但也是这四个分属不同。
盒子类型
标准：box-sizing: content-box; （浏览器默认）
（图片来自网络）
从上图看出：
标准盒模型：
盒子总宽度 = width padding border margin;
盒子总高度 = height padding border margin;
也就是说什么呢？width/height 只是内容高度，不包含 padding 和 border 值
IE：box-sizing: border-box; （Bootstrap 框架全局配置成此类型）
（图片来自网络）
IE盒模型：
盒子总宽度 = width margin = (内容区宽度 padding bordre) margin;
盒子总高度 = height margin= (内容区高度 padding bordre) margin;
也就是说什么呢？ width/height 包含了 padding 和 border 值
以上就是标准化理解，我来说说我的理解：
在CSS中，我们给一个div设置了width（宽度） 对于标准盒模型(content-box)： 设置的width就是我内容的宽度，如果你还要加padding / margin之类的，你就只有向外面挤。在换句话讲，如果你还加了padding和margin，那么整个盒子的宽度和高度将超出设置的width和height 对于IE盒子模型(border-box)： 我设置了width和height，那么整个盒子的宽度和高度就固定了。那如果我还要加padding和margin怎么办？只能压缩真正的内容显示区域了，整个盒子的宽度和高度依然不变。
JS获取宽高度
（1）dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
（2）dom.currentStyle.width/height （只有IE兼容）取到的是最终渲染后的宽和高
（3）window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。
（4）dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。
（6）dom.offsetWidth/offsetHeight 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。
边距重叠问题
先说解决方案：BFC，在我第一篇帖子里已经提到了此解决方案：https://www.misiyu.cn/article/96.html#B.外边距折叠
我这里就说一下 边距重叠问题是什么问题：
也就是说，两个盒子如果一个盒子设置下边距，一个盒子设置了上边距，那么他们的间距是多少？答案是按边距最大的算
但是如果想他们的边距不重叠，而是相加，怎么办呢？利用BFC来解决。至于什么是BFC，BFC生成条件有哪些，请看上面链接的我的另一篇文章。
