css - *{ 盒子尺寸 : border-box }

Question

*{
  box-sizing: border-box;
}

这是个好主意吗？有什么缺点吗？

当我希望元素具有 100% 和一些内部填充时，我发现这非常有用。因为我不必在内部为填充添加另一个元素:/

Answer 1

我几乎总是开始使用它。

优点,

您不再需要计算出 CSS 盒模型。

您可以轻松地向对象添加较大的 padding，而无需重新调整高度/宽度

更快地编码您的 css(如果没有，请查找 SASS)

缺点,

IE7 及以下版本不支持，谁在乎呢？有些人很遗憾。

IE8 及更高版本仅部分支持。

如果我不想让所有东西都拥有它，这就是我的处理方式，

div, li, p {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

我添加了我知道将利用此属性的元素，并防止每个对象都具有该属性。