CSS 为什么 Bootstrap 3 切换到 box-sizing: border-box？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18854259/
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
Why did Bootstrap 3 switch to box-sizing: border-box?
提问by Alexander Rechsteiner
I'm migrating my Bootstrap themes from v2.3.2 to v3.0.0 and one thing I noticed is that a lot of dimensions are calculated differently, due to the following styles in bootstrap.css.
我正在将 Bootstrap 主题从 v2.3.2 迁移到 v3.0.0，我注意到的一件事是，由于 bootstrap.css 中的以下样式，许多维度的计算方式不同。
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Can anyone explain why Bootstrap switches the box-sizing of all elements to border-box? I suspect it has to do with the new grid system being percent-based, but the selector above does not only apply to the grid elements obviously.
谁能解释为什么 Bootstrap 将所有元素的 box-sizing 切换为 border-box？我怀疑这与基于百分比的新网格系统有关，但上面的选择器显然不仅适用于网格元素。
Seems a bit radical imho :-)
似乎有点激进恕我直言:-)
Anyone care to give some insight?
有人愿意提供一些见解吗？
回答by Bass Jobsen
The release notes tell you: (http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)
发行说明告诉你：（http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/）
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
默认情况下更好的盒子模型。Bootstrap 中的所有内容都具有 box-sizing: border-box，使得更容易的大小调整选项和增强的网格系统。
Personally I think most benefits go to the grid system. In Twitter's Bootstrap all grids are fluid. Columns are defined as percentage of the total width. But the gutter have a fixed width in pixels. By default a padding of 15px on both side of the column. The combination of width in pixels and percentage could be complex. With border-boxthis calculating is easy because the border-boxvalue (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. (http://css-tricks.com/box-sizing/)
我个人认为大多数好处都归功于网格系统。在 Twitter 的 Bootstrap 中，所有网格都是流动的。列被定义为总宽度的百分比。但是装订线具有固定的像素宽度。默认情况下，列两侧的内边距为 15px。像素宽度和百分比的组合可能很复杂。有了border-box这种计算很容易，因为border-box值（相对于内容框默认值），使最终呈现的框声明宽度，并且盒子内的任何边界和填充切断。( http://css-tricks.com/box-sizing/)
Also read: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
另请阅读：http: //www.paulirish.com/2012/box-sizing-border-box-ftw/
