html - 我可以在我的项目中使用 global box-sizing:border-box 吗？

Question

我可以在我的所有 murkup（所有项目）中使用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;
}

它使每个 ga 变得更容易，并得到广泛支持。

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

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

编辑

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

默认情况下，box-sizing 应该是border-box。

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;
}

它对我来说效果很好。