Html 似乎 box-sizing: border-box 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22253560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
It seems that box-sizing: border-box is not working
提问by Ilja
I've never came across this issue, but in a nutshell I apply border box as my box-sizing to all the elements:
我从来没有遇到过这个问题，但简而言之，我将边框框作为我的框大小应用于所有元素：
*, *: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;
}
I than have a responsive column layout, in this case 3 columns per row
我有一个响应式列布局，在这种情况下每行 3 列
<div class="row clearfix">
<div class="column span-4-12 property">
<p>..</p>
</div>
<!-- more divs here -->
</div>
All spans nicely across 3 columns until I add margin to .property div, now usually because of border-box this would simply add margin between the columns and leave them 3 in a row, but now for some reason 3rd column is pushed to a new row, I honestly don't understand why, am I missing something?
全部跨越 3 列，直到我向 .property div 添加边距，现在通常是因为边框框，这只会在列之间添加边距并将它们连续保留 3，但现在由于某种原因，第三列被推到一个新的列行，老实说，我不明白为什么，我错过了什么吗？
Here is live example on jsFiddle: http://jsfiddle.net/NmrZZ/
这是 jsFiddle 的现场示例：http: //jsfiddle.net/NmrZZ/
回答by CherryFlavourPez
Margin is not part of the box-model (whatever box-sizing you use), so it will always be in addition to the width + padding + border you've declared.
边距不是框模型的一部分（无论您使用什么框大小），因此它始终是您声明的宽度 + 填充 + 边框的补充。
The image below (from the CSS Tricksarticle on this topic) illustrates the difference between the standard box-model and box-sizing: border-box:
下图（来自关于此主题的CSS Tricks文章）说明了标准盒模型和 之间的区别box-sizing: border-box：
The best advice I can give is to avoid margins for your grid entirely, and to keep it separate from your presentation. This means more markup, but will save you headaches and make things much easier to maintain. Check out this forkof your example. The amended CSS:
我能给出的最好建议是完全避免网格的边距，并将其与您的演示文稿分开。这意味着更多的标记，但会为您省去麻烦并使事情更容易维护。看看你的例子的这个分支。修改后的 CSS：
.span-4-12 {
width: 33.33%;
padding-left: 2%;
}
.property {
background: white;
}
And the new markup will be:
新标记将是：
<div class="column span-4-12">
<div class="property">
<p>Some text 1</p>
</div>
</div>
回答by Ayyappan K
It's a float clear problem. Instead of float you can use inline-block as float is outdated. Most people now use display:inline-blockas there is no need to write clearfor separate line.
这是一个浮动清除问题。您可以使用 inline-block 代替 float，因为 float 已过时。大多数人现在使用，display:inline-block因为不需要clear为单独的行编写。
Refer:
参考：
*, *: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>