* {box-sizing：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;
}

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

Answer 2

最大的缺点是它在许多浏览器中都不起作用，特别是<IE8。 看看这里的用法。

当我使用它时，我通常会确保在样式表中包含以下所有内容

.my-element {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}