似乎 box-sizing: border-box 不起作用

Question

我从来没有遇到过这个问题，但简而言之，我将边框框用作所有元素的框大小：

 *, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

我有一个响应式列布局，在这种情况下每行 3 列

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

在我将边距添加到 .property div 之前，所有内容都很好地跨越了 3 列，现在通常由于边框框，这只会在列之间添加边距并将它们连续 3 列，但现在由于某种原因，第 3 列被推到一个新的排，老实说我不明白为什么，我错过了什么吗？

这是 jsFiddle 上的实时示例：http: //jsfiddle.net/NmrZZ/

原文由 Ilja 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

边距不是盒子模型的一部分（无论您使用什么盒子大小），所以它总是在您声明的宽度 + 填充 + 边框之外。

下图（来自关于此主题的 CSS 技巧 文章）说明了标准框模型和 box-sizing: border-box 之间的区别：

我能给出的最好建议是完全避免网格的边距，并将其与演示文稿分开。这意味着更多的标记，但会让您省去麻烦并使事情更容易维护。看看你的例子的 这个分支。修改后的 CSS：

 .span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

新标记将是：

 <div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>

原文由 CherryFlavourPez 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个浮动明确的问题。你可以使用 inline-block 而不是 float，因为 float 已经过时了。大多数人现在使用 display:inline-block 因为不需要写 clear 作为单独的行。

参考：

 *, *:before, *:after {
	margin: 0;
	padding: 0;

	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

body {
    background: grey;
}
}

.row {
	clear: both;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clear {
    zoom:1;
}

.column {
	display: inline-block;
	}

.span-4-12 {
	width: 30%;
}

.property {
    background: white;
    margin-left: 2%;
}

 <div class="row clearfix">
   <div class="column span-4-12 property">
      <p>Some text 1</p>
   </div>

    <div class="column span-4-12 property">
      <p>Some text 2</p>
   </div>

    <div class="column span-4-12 property">
      <p>Some text 3</p>
   </div>
</div>

原文由 Ayyappan K 发布，翻译遵循 CC BY-SA 3.0 许可协议