css - 当我需要填充和边距时如何使用网格？

Question

我一直没有使用任何类型的网格系统，因为我总是把填充和边距弄乱。

假设我的网格是 90px，我有这段代码:

//HTML
<div class="col1">
 <div class="content">
   Hello world
 </div>
</div>

//CSS
.col1 { width: 90px; margin: 0px; padding: 0px; background-color: #444; }
.content { margin: 20px; color: #fff; background-color: #0087d5; width: 100%; }

JSfiddle here .

如何使用网格，确保网格保持 90 像素的宽度，同时内部“div”的宽度为 100%，内边距/边距为 20 像素？

我知道那里有很多网格系统，我已经测试了一些，但我一定是以错误的方式“攻击”这个，因为当我开始使用填充来获得一些空间时，我的网格总是会扩展。

Answer 1

您应该应用 box-sizing，它在计算宽度时考虑填充(即 90px + 10px 用于填充，将适用填充向内，而不是创建 110px 的总宽度。如果您想要更加安全，请将此添加到您的重置或规范化样式表:

* { box-sizing: border-box }

对于旧版本的 Safari 和 Firefox:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box }

使用通配符选择器允许将 box-sizing 属性应用于所有元素。我知道这包含在一些网格系统中，例如Skeleton .