比例CSS网格 - 有什么收获？

Question

我一直在开发网站很多年，经过一段时间的休息后，我重新回到它，所以决定这将是一个理想的时间来看看网格和响应式设计。在过去的几天里，我一直在阅读和尝试很多CSS网格及其背后的理论。我甚至开始在SCSS中开发自己的每个断点具有可变％边距（因此移动设备不会变脏）。

到目前为止，我所学到的东西让我对网格的看法颇为不同。固定网格看起来反应敏捷，流体网格可能遭受舍入误差，以及那些看起来并不复杂的网格。我理论上喜欢电网，但实际上他们并没有完全说服我。

但是，我只是come across a method创建一个流体CSS网格，看起来几乎完美通过使用填充和边界框代替边距的排水沟和边框。排水沟保持成比例，舍入误差最小化，并且可能对设计更灵活。到目前为止，唯一的缺点是旧IE需要修复（当时没有什么不寻常的）。

但是，这种方法似乎没有被广泛采用，这是（正确或错误）让我对此谨慎。除了上面链接的文章外，我遇到的每篇文章和流体网格系统都使用边距而不是填充排水沟（并且only one of those解决了舍入误差的问题）。

那么为什么这种方法如此多产？使用填充/边界框而不是边距来填充排水沟有什么用处？

Answer 1

你问的基本上是为什么人们不使用box-sizing: border-box，对吧？

我只能猜测。这可能是因为他们想要支持IE的老版本，因为它们的所有旧模块都被写入默认盒子模型content-box下工作，不能被重写，或者可能是因为无知。在较大的CSS网格的情况下，它可能是吸引更大的，不知道的观众。

无论哪种方式，缺点是相当无关的。您可以更改框模型，以便从width或height减去border和padding的值，而不是将其添加到它。这意味着使用默认框模型编写的width和height可能需要重写为不考虑元素可能具有的任何填充或边框。这就是真的。

Browser support goes back to IE8，甚至还有a polyfill for IE6 and IE7，所以不用担心。

的一个怪癖，我一直在使用border-box注意的是，当你应用边框或填充至非正方形图像时，图像略微scewed除非你设置它height到auto。但是在这个RWD时代，谁不这样做？

给它几年，每个人都将使用border-box而不是content-box。