为什么设置框大小:内容框；在单数元素上？

Question

我刚刚浏览了bootstrap.css文件，并看到了以下代码行：

hr {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

我有一个问题，也只有一个问题，为什么整个文档都有它的box-sizing: content-box;，为什么是显式的box-sizing: box-border;？为什么要将一个单数元素转换为box-sizing: content-box;？

我提供的示例仅是设置为box-sizing: content-box;的元素的框大小的一个实例，我在CSS样式表中多次看到这种情况，但从未见过这种样式的实用性。

为什么向单数元素中添加一个box-sizing: content-box;是有用的？有人会提供一个实际的例子吗？

Answer 1

如果我们查看引导源文件，我们会发现这些CSS的行实际上来自于normalize.css项目。normalize.css的目标是在浏览器之间创建一个一致的CSS库。我发现了几年前添加这个CSS的承诺。对这一承诺的解释是：

火狐对所有其他浏览器使用不同的box-sizing和height值。火狐目前不支持没有box-sizing前缀的-moz-，所以我们使用供应商前缀和无前缀属性来确保它与其他浏览器的content-box值相匹配。它还要求将height设置为0。

然后提交到第133期的链接，该链接声明：

HR元素的框大小设置为最新火狐(15)中的边框，而在Chrome (22)、Opera (12)、Safari (5.1)、IE9和IE8中设置为内容框。

因此，这听起来似乎是为了显式地使hr元素的hr在浏览器之间保持一致。在引导项目的上下文中，这可能是不必要的，因为Bootstrap已经通过将所有元素设置为box-sizing: border-box来提供一致性。

Answer 2

当您考虑到内容框设置与高度:0配对时，就更有意义了。如果一个元素有高度:0和框大小:边框框，那就意味着人力资源必须有零高度，甚至包括边框。换句话说，它是看不见的。另一方面，Content意味着边框不被计算为高度的一部分，因此即使高度为0，边框仍然可以显示。

在浏览器中设置hr元素的样式是众所周知的，它们显然决定将高度正常化为0，以消除一些不一致之处。通过扩展，这也可能意味着他们希望用边框属性来设计hr元素。诚然，这个决定本身让我觉得有点奇怪，因为我认为Opera并没有很好地尊重人力资源的边界。所以，虽然我也不确定这对我来说是完全合理的，但它并不像最初看上去那么奇怪。

Answer 3

您在引导中引用的代码实际上来自Normalize.css https://necolas.github.io/normalize.css/。

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

文档仅限于“解决Firefox与其他浏览器之间的差异”。也就是说，box-sizing: border-box强迫高度和宽度值同时包含填充和边框。Firefox使用边框来呈现在使用hr标记时看到的行。与其他浏览器不同，如果将box-sizing: border-box;和height: 0;结合使用，那么在FF中什么也看不到。