css - csslint - 破盒模型

Question

我已经为我的样式表使用了 CSSLint，但我收到了一个我不理解的警告。

考虑这个 CSS 代码：

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

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

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

score 6 · Accepted Answer

我想 CSSLint 试图在读者周围强制执行一组良好实践，而不必理解盒子模型的含义。归根结底，我完全理解盒子模型，并且理解你的 css 产生了 52px 的“实际”宽度/高度，这可能是为了防止误解。

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

score 2 · Accepted Answer

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

它警告您的是，在标准盒子模型中，除了您指定的高度/宽度之外，它的宽度border也是如此。

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

CSSLint 警告您这一点，因为您可能没有意识到这一点，因此您的布局可能与预期的不太一样。

如果您知道这一点并在布局中考虑到了这一点，那么您可以取消选中 CSSLint 中的“小心损坏的盒子模型”复选框来抑制此警告。

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

score 0 · Accepted Answer

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

3 回答 3