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

我正在将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？我怀疑这与基于百分比的新网格系统有关，但是上面的选择器显然不仅适用于网格元素。

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

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

— 亚历山大·雷希施泰纳
source

感谢您的CSS代码段；这正是我想要将其应用于非引导项目的目的。:)

— berto 2014年

有人知道为什么需要*：before和*：after吗？

— limscoder 2014年

@limscoder *:before和*:after也需要将此框模型应用于:before和:after伪元素。

— buschtoens 2014年

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

— JarekPrzygódzki16年

102

发行说明告诉您：（http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/）

默认情况下，盒模型更好。Bootstrap中的所有内容都可以进行大小调整：边框调整，可以简化大小调整选项并增强网格系统。

我个人认为，大多数好处都归于网格系统。在Twitter的Bootstrap中，所有网格都是可变的。列定义为总宽度的百分比。但是装订线的像素宽度是固定的。默认情况下，列两边的填充为15px。以像素为单位的宽度和百分比的组合可能很复杂。通过border-box此计算很容易，因为该border-box值（与内容框默认值相反）使最终渲染的框成为声明的宽度，并且在框内剪切了任何边框和填充。（http://css-tricks.com/box-sizing/）

另请阅读：http : //www.paulirish.com/2012/box-sizing-border-box-ftw/

— 巴斯·乔布森
source

简单示例：尝试使用100％宽度div将1个像素的边框放在content-box。现在，您获得了100％+ 2像素的效果。使用border-box，您就不会遇到这个问题，它仍然是100％。

— emptywalls

在本期中进行了充分的讨论和证明。

— yuvilio

同样值得一提的是，箱体尺寸实施最佳实践已更新，以免干扰第三方库。我不确定Bootstrap是否计划更新，但他们应该：css-tricks.com/…–

— jbyrd

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

— dkellner 2015年