2

我正在对页面上的所有内容使用 box-sizing: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 不会（框大小有效）。任何帮助表示赞赏。

4

1 回答 1

2

我相信它工作正常。

box-sizing: border-box覆盖向（非绝对大小的）元素添加填充和边框的默认行为会增加该元素的总大小。使用border-box时，所有元素的行为就好像它们已经相对于填充确定了绝对大小：添加填充会增加元素边框与其内容之间的内部空间，但不会增加元素的总大小。

所以发生的事情是，通过添加padding: 10px，.container您减少了可用于.container的内容的水平内部空间量。并且由于.container' 的宽度不会增长（如box-sizing规则所指定），并且子元素不会缩小，因此第二个子元素必须换行，因为两个子元素的组合宽度现在大于 的可用内部空间.container。

向.grid_元素“works”添加填充（您对“works”的定义假定为.container's 的子元素适合一行并且不换行），因为根据box-sizing规则，这些元素除了设置的宽度之外不应增加宽度（由 960 gs 设置）当他们被给予填充时。添加填充的结果是增加.grid_元素边框与其内容之间的空间（“此处的徽标”/“此处的标语”），并减小.grid_元素的“内部宽度”。

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

这是有关box-sizing值的更多信息，以及一些演示。

于 2012-10-24T16:43:34.243 回答