当我们在进行前端开发的时候，经常会遇到盒模型的 bug，导致我们的响应式布局效果不尽如人意。而这个问题的根源在于盒模型的不同，今天我们就来详细讲解盒模型的基本知识，以及如何解决盒模型的 bug，让你的响应式设计更加顺畅。
盒模型的基础知识
盒模型是 CSS 中一种用于布局的重要概念，它将 HTML 元素看作是一个矩形的盒子，这个盒子由四个部分组成，分别是 content、padding、border、margin。下面，我们来逐一解释这些部分：
Content：元素内容所占据的空间，它的大小由 width 和 height 决定。
Padding：元素内边距所占据的空间，即元素内容与元素边框之间的空间。
Border：元素边框所占据的空间，即元素内容与元素外边距之间的空间。
Margin：元素外边距所占据的空间，即元素内容与其他其它元素之间的空间。
在 CSS 中，有两种不同的盒模型，它们分别是 W3C 盒模型和 IE 盒模型。
W3C 盒模型：content 部分不包含 padding 和 border，它的计算方式是：元素的宽度和高度等于设置的 width 和 height。
IE 盒模型：content 部分包含了 padding 和 border，它的计算方式是：元素的宽度和高度等于设置的 width 和 height 加上 padding 和 border 。
如何解决盒模型的 bug
盒模型的不同可能导致我们的响应式布局出现一些奇怪的问题，比如我们设置了一个元素的宽度为 300px，但在某些浏览器中却看起来比 300px 要宽或者窄。这就是盒模型的 bug 造成的，那么如何解决这个问题呢？
1. 使用 box-sizing 属性
我们可以使用 CSS3 的 box-sizing 属性来解决盒模型的 bug ，这个属性有以下三个值：
- content-box：表示元素的宽度和高度仅包含 content 部分，即 W3C 盒模型。
- border-box：表示元素的宽度和高度包含 padding、border 和 content 部分，即 IE 盒模型。
- inherit：表示元素继承父级元素的 box-sizing 属性值。
在实际开发中，我们通常使用 border-box 来设置盒模型，这样设置后，我们设置的宽度和高度就包括了 padding 和 border 了。
* {
box-sizing: border-box;
}举例
下面是一个具体的例子，我们在 div 元素上设置宽度，对比两种盒模型下的展示效果：
-- -------------------- ---- -------
-- -- --- --- --
--- -
------ ------
-------- -----
------- --- ----- -----
-
-- -- ---------- --- --
--- -
------ ------
-------- -----
------- --- ----- -----
----------- -----------
-2. 设置元素的外边距
有时候，即使我们已经使用了 border-box，还是会出现盒模型的 bug，这时候我们可以设置元素的外边距来解决问题。
具体的做法是，在设置元素的宽度时，把外边距也算进去，如下所示：
div {
width: calc(100% - 40px);
margin: 20px;
box-sizing: border-box;
}这样，我们就可以准确地控制元素的宽度了。
总结
以上就是解决盒模型的 bug 的方法，我们可以使用 box-sizing 属性来设置盒模型，也可以在设置元素宽度时考虑到外边距的影响。盒模型的理解和掌握可以帮助我们更好地进行响应式布局，同时也是前端必备技术之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a2633f48841e9894ebe279