为什么box-sizing: border-box；在960.gs中应用于容器时不起作用？

Question

我对我页面上的所有东西都使用了box- page : border-box。但是，当我向960.gs网格中的容器元素添加填充时，它会将第二个网格移动到下一行。但是，如果我将它添加到单独的网格类中，它确实可以按预期工作。

<header role="banner" id="header">
     <div class="container container_12">
          <div class="grid_4">
               logo here
          </div>
          <div class="grid_8">
               tagline here
          </div>
     </div> </header>

向.conatiner添加10px的填充会将grid_8包装到下一行。将10px添加到grid_4和grid_8都不会(框大小调整有效)。任何帮助都是非常感谢的。

Answer 1

我相信它工作正常。

box-sizing: border-box覆盖了默认行为，即向(非绝对大小的)元素添加填充和边框会增加该元素的总大小。使用border-box，所有元素的行为就像它们相对于填充进行了绝对大小调整一样:添加填充会增加元素边框和内容之间的内部空间，但不会增加元素的总大小。

因此，通过将padding: 10px添加到.container中，可以减少可用于.container内容的水平内部空间量。由于.container的宽度不会增长(由box-sizing规则指定)，子元素也不会收缩，因此第二个子元素必须换行，因为两个子元素的总宽度现在大于.container的可用内部空间。

向.grid_元素添加填充“有效”(您对“作品”的定义假定.container的子元素适合一行并且不换行)，因为根据box-sizing规则，当给这些元素添加填充时，这些元素不应该在设置宽度(由960GS设置)之外获得宽度。添加填充的结果是增加.grid_元素的边框和内容之间的间距(“这里的徽标”/“这里的标语”)，并减少.grid_元素的“内部宽度”。

基本上，box-sizing: border-box意味着填充(和边框！)在内部添加，而不是在外部添加，并且您的示例一致地演示了这种行为。

Here is more info on box-sizing values, plus some demos。