css - *{ 框尺寸：边框框 }

Question

*{
  box-sizing: border-box;
}

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

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

Answer 1

我几乎总是开始使用它。

优点，

您不再需要计算 CSS box-model。

您可以轻松地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;
}