为啥 Bootstrap 3 切换到 box-sizing:border-box？

Posted 2023-03-06

【中文标题】为啥 Bootstrap 3 切换到 box-sizing:border-box？

【英文标题】：Why did Bootstrap 3 switch to box-sizing: border-box?为什么 Bootstrap 3 切换到 box-sizing:border-box？

【发布时间】：2013-09-22 03:38:49

【问题描述】：

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

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

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

【问题讨论】：

感谢 CSS sn-p；这正是我想要将其应用于非引导项目的方法。 :)

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

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

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

【参考方案1】：

发行说明告诉你：(http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/)

默认情况下更好的盒子模型。 Bootstrap 中的所有内容都得到了 box-sizing：border-box，提供了更简单的尺寸选项和增强的网格系统。

我个人认为大多数好处都归于网格系统。在 Twitter 的 Bootstrap 中，所有网格都是流动的。列定义为总宽度的百分比。但是排水沟有一个固定的像素宽度。默认情况下，列两侧的内边距为 15px。以像素为单位的宽度和百分比的组合可能很复杂。使用border-box，这个计算很容易，因为border-box 值（与默认的内容框相反）使最终渲染的框具有声明的宽度，并且框内的任何边框和填充都被切割。 (http://css-tricks.com/box-sizing/)

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

【讨论】：

简单示例：尝试在 100% 宽度的 div 上放置 1 像素边框，使用 content-box。现在你得到了 100% + 2 像素的东西。使用border-box，您就没有这个问题，它仍然是 100%。

在this issue 中进行很好的额外讨论和证明。

另外值得注意的是，盒子尺寸实施最佳实践已更新，以免干扰第 3 方库。我不确定 Bootstrap 是否计划更新，但他们应该：css-tricks.com/…

就我个人而言，自 IE6 以来我从未更改过盒子模型。这是 IE 唯一知道的事情。是的，今天你有 calc() 来解决那些 100% 加 2 像素的问题，但是 samurai 的方式始终是包含边框和填充的边框框。这就是人脑想象一个盒子的方式。我喜欢看到这种“新趋势”，我为他们准备了迎宾饮品。