为什么 Bootstrap 3 切换到 `box-sizing: border-box`？

揭开 Bootstrap 3 中对 Border-Box 的切换

Bootstrap 3 引入了一个显着的变化，包含了 box-sizing: border-box 的所有元素。这种与默认内容框值的偏差引发了对其基本原理的质疑。

在从 Bootstrap 2.3.2 到 3.0.0 的迁移过程中，开发人员观察到由于这一变化而导致的显着尺寸差异。 bootstrap.css 中的以下 CSS 规则指出了此修改的核心：

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Border-Box 对维度的影响

在传统的内容盒模型下，元素的宽度和高度只考虑其内容，不包括填充和边框。这会在尝试计算总宽度或高度时导致问题，因为它们会超出声明的值。

相比之下，border-box 在宽度和高度计算中包括内边距和边框。这个简化的模型确保最终渲染的盒子大小与指定的宽度和高度精确对齐，无论填充或边框大小如何。

Border-Box 在 Bootstrap 网格系统中的作用

虽然移动到 border-box 会影响所有元素，在 Bootstrap 3 的流体网格系统中影响尤其大。在流体网格中，列被定义为容器总宽度的百分比，允许它们响应式缩放。

在内容框模型下，计算列大小需要考虑两侧的固定宽度装订线。 border-box 消除了这种复杂性。列的声明宽度现在包括其边框和填充，提供一致且直观的尺寸调整方法。

行业接受度和好处

除了对 Bootstrap 网格系统的好处之外，采用box-sizing：border-box 在 Web 开发中得到了广泛的接受。它促进跨浏览器的一致行为，并提供直观的布局和大小调整方法。

Bootstrap 3 的发行说明明确说明了此更改背后的意图：“默认情况下更好的盒子模型。Bootstrap 中的所有内容都会调整盒子大小：边框框，更容易调整大小选项和增强的网格系统。”

其他资源：

• [Border-Box 的浏览器支持](http://css-tricks.com/box-sizing/)
• [Border-Box 的优点](http ://www.paulirish.com/2012/box-sizing-border-box-ftw/)

以上是为什么 Bootstrap 3 切换到 `box-sizing: border-box`？的详细内容。更多信息请关注PHP中文网其他相关文章！