css - bootstrap 中的这个 CSS 是做什么的？

Question

所以我有一些 Jquery UI 可拖动跨度元素，在将 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-draggable span 元素的高度:

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

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

Answer 1

content-box width, padding, border, margin 是content box model

中的个别内容

border-box:border box模型包括border和width内的padding。