这个引导程序中的CSS是做什么的？

Question

所以我有一些Jquery UI可拖动的span元素，在将Bootstrap 3.0添加到我的网站后缩小了高度，这是一个问题，因为它们是我的文档标记/定位应用程序的一部分，需要保持相同的高度。我找到了罪魁祸首：

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

在Bootstrap.css中。如果我注释掉-webkit-box-sizing：border-box ;, box-sizing：border-box;或-moz-box-sizing：border-box;单独我的问题仍然存在，但如果注释掉整个样式，我的可拖动元素的高度将恢复到原始高度。

我可以像这样重写这个样式来恢复我的ui可拖动的span元素的高度：

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

内容框和边框之间有什么区别？

Answer 1

CSS box-sizing规则确定如何计算元素的维度，width和height根据值采用不同的含义。基本上，它会修改CSS框模型。

content-box是默认值，表示“padding和border”的值不包括width或height。

如果将其设置为border-box，则相反;您的padding和border尺寸将折叠到元素的尺寸中。请注意，margin不会（没有margin-box值，因此margin始终位于元素的维度之外。例如，设置

width: 200px;
padding: 0 20px;

意味着40px / 20px + 20px将使用200px宽度的margin（padding），且仅160px将留给内容宽度。使用content-box时，内容宽度将占用200px规则的所有width，并且padding将正常添加到元素内容之外。

您找到的霰弹枪方法背后的可能原因（在box-sizing: border-box;上设置*, *:before, *:after）是因为有些人发现box-sizing: border-box;比默认content-box值更直观，如您所知，无论您拥有width或height尺寸，您都将始终拥有指定尺寸的元素（padding / border），以便进行布局。{ {1}}仍将影响布局）。保罗爱尔兰人在this blog post of his中推广了这种观点。

请注意，其中的其他规则只是特定于供应商的规则，适用于那些尚不支持标准margin规则的供应商浏览器的版本。

Answer 2

内容框：宽度，填充，边框，边距是内容框模型中的各个内容

border-box：边框框模型包括宽度内的边框和填充。