为什么Bootstrap 3切换为box-sizing：border-box？

Question

我正在将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;

}

谁能解释为什么Bootstrap将所有元素的框大小切换为border-box？我怀疑这与基于百分比的新网格系统有关，但是上面的选择器显然不仅适用于网格元素。

似乎有点激进的恕我直言:-)

有人愿意提供一些见识吗？

Answer 1

就个人而言，自IE6以来，我从未更改过盒型。那是IE更清楚的一件事。是的，今天您有了calc（）来解决那些100％加2像素的问题，但是武士的方式始终是带有边框和填充的边框。这就是人脑想象盒子的方式。我喜欢看到这个“新趋势”，我为他们喝了一杯欢迎酒。 

Answer 2

*选择器使开发人员难以在CSS的其他位置使用content-box或padding-box。从头开始一个新项目的最佳实践是 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }