我已经开发网站很多年了，经过一年的休息后，我又重新开始了，所以决定这是研究网格和响应式设计的理想时机。在过去的几天里，我一直在阅读和试验 CSS 网格及其背后的理论。我什至开始在 SCSS 中开发我自己的，每个断点都有可变的 % 边距（所以手机不会被压扁）。
到目前为止，我所学到的东西让我对网格的看法相当复杂。固定网格似乎反响应，流体网格可能会出现舍入错误，以及那些看起来不太复杂的网格。理论上我很喜欢网格，但实际上它们并没有完全说服我。
但是，我刚刚遇到了一种创建流畅 CSS 网格的方法，该方法通过使用填充和边框框代替边距来创建看起来几乎完美的填充物。排水沟保持成比例，舍入误差最小化，设计可能更灵活。到目前为止，我能看到的唯一缺点是旧的 IE 需要修复（那时没什么不寻常的）。
但是这种方法似乎并没有被广泛采用，这（无论对错）让我对它保持警惕。除了上面链接的文章之外，我遇到的每篇文章和流体网格系统都使用边距而不是边距填充（并且只有一篇解决了舍入错误的问题）。
那么为什么这种方法如此多产呢？使用填充/边框框代替边距有什么问题？
您要问的基本上是为什么人们不使用box-sizing: border-box，对吗？
我只能猜测。可能是因为他们想支持旧版本的IE，因为他们所有的旧模块都是在默认的盒子模型下content-box编写的，无法重写它，也可能是因为简单的无知。在较大的 CSS 网格的情况下，可能是为了吸引更大的、不知情的观众。
无论哪种方式，缺点都是无关紧要的。您将盒子模型更改为从 a 中减去border和padding值，width而height不是添加到它。这意味着使用默认盒子模型width编写height的可能需要重写，以不考虑元素可能具有的任何填充或边框。就是这样，真的。
浏览器支持可以追溯到 IE8，甚至还有针对 IE6 和 IE7 的 polyfill，所以无需担心。
我注意到使用的一个怪癖border-box是，当您将边框或填充应用于非方形图像时，除非您将其设置height为auto. 但是在这个RWD时代，谁不这样做呢？
给它几年，每个人都会使用border-box而不是 content-box.