Question

我已经在我的样式表中使用了CSSLint，并且收到了一条我不明白的警告。

考虑这个CSS代码：

div {
    width: 50px;
    height: 50px;
    border: 1px solid;
}

CSSLint说如下： “破箱模型：使用带边框的高度。” “破箱模型：使用带边框的宽度。”

为什么我不应该使用带边框的宽度/高度？

Answer 1

我认为CSSLint试图围绕读者强制执行一系列良好实践，而不必理解盒子模型的含义。在一天结束时，我完全理解盒子模型，并且理解你的css产生的“实际”宽度/高度为52px，这可能是它试图防止误解。

就个人而言，我会忽略它。它确实说“警告”而不是错误，因此是主观的。

Answer 2

这是一个警告，而不是错误，所以你很好！

它警告你的是，在标准盒子模型中，border的宽度加上到你指定的高度/宽度。

因此，在您的示例中，页面上框的实际高度和宽度将为52像素。

CSSLint会警告你这个问题，因为你可能没有意识到这一点，因此你的布局可能不是那么符合预期。

如果你知道这一点，并且你已经在布局中考虑了它，那么你可以取消CSSLint中的“小心破损的盒子模型”复选框来压制这个警告。

顺便说一下，这同样适用于padding。

Answer 3

旧的Internet Explorer版本（与其他所有版本相比）使用不同的方式来计算事物的宽度。旧的IE测量了包括其填充和边框的框，新的东西测量内容的大小而没有填充和边框。为确保您的网站在两种类型的盒子模型中一致显示，您可以选择在应用于同一元素的样式中没有填充/边框和宽度/高度。