(2019)[前端]面试题[4]：CSS盒模型你了解多少？

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怎么办？只能压缩真正的内容显示区域了，整个盒子的宽度和高度依然不变。

（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.%E5%A4%96%E8%BE%B9%E8%B7%9D%E6%8A%98%E5%8F%A0

我这里就说一下 边距重叠问题是什么问题：

也就是说，两个盒子如果一个盒子设置下边距，一个盒子设置了上边距，那么他们的间距是多少？答案是按边距最大的算

但是如果想他们的边距不重叠，而是相加，怎么办呢？利用BFC来解决。至于什么是BFC，BFC生成条件有哪些，请看上面链接的我的另一篇文章。