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

最大的缺点是它在许多浏览器中都不起作用，最具体的是＆lt; IE8。查看使用情况here。

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

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

* {box-sizing：border-box}

2 个答案: