我可以在我的项目中使用全局框大小调整:边框吗？

Question

我可以在我的全黑(所有项目)中使用box-sizing: border-box;吗？

例如：

html { 
   box-sizing: border-box; 
}, 
:before, *:after {
  box-sizing: inherit; 
}

因为计算实际宽度更容易，但是这种方法有什么缺点吗？

Answer 1

我通常把它应用到所有的东西上。使用：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

它使每个g都变得容易得多，并且得到了广泛的支持。

https://css-tricks.com/international-box-sizing-awareness-day/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

编辑

同样值得注意的是，CSS工作组认为这是CSS设计中的一个错误：

框-默认情况下，边框大小应为边框。

https://wiki.csswg.org/ideas/mistakes

Answer 2

使用它是非常有益的

html {
  -webkit-box-sizing: border-box;
       box-sizing: border-box;
}

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

您可以通过将特定的CSS应用于任何元素来轻松覆盖它。

只是为了获得知识。Bootstrap也使用这种技术。

根据caniuse.com，IE6和IE7不支持此功能

Answer 3

我使用

html * {
    box-sizing: border-box;
}

它对我来说工作得很好。