csslint - 破碎的盒子模型
我在样式表中使用了 CSSLint，但收到一条我不明白的警告。
考虑这个 CSS 代码：
div {
width: 50px;
height: 50px;
border: 1px solid;
}
CSSLint 表示以下内容： “破盒子模型：使用带有边框的高度。” “破盒子模型：使用带边框的宽度。”
为什么我不应该使用带边框的宽度/高度？
I've used CSSLint for my stylesheets and I get one warning that I don't understand.
Consider this CSS Code:
div {
width: 50px;
height: 50px;
border: 1px solid;
}
CSSLint says the following:
"Broken box model: using height with border."
"Broken box model: using width with border."
Why shouldn't I use width / height with border?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为 CSSLint 试图在读者周围强制执行一组良好实践，而不必了解盒模型的含义。归根结底，我完全理解了盒子模型，并且理解你的 css 产生的“实际”宽度/高度为 52px，这可能是为了防止误解。
我个人会忽略它。它确实说的是“警告”而不是错误，因此是主观的。
I suppose that CSSLint is trying to enforce a set of good practices around the reader not having to understand the implications of the box model. At the end of the day, I understand the box model entirely well and understand that your css produces an "actual" width / height of 52px which perhaps its trying to guard against misunderstanding.
Personally I'd ignore it. It does say "warning" rather than error and is therefore subjective.
这是警告，不是错误，所以没问题！
它警告您的是，在标准盒模型中，
边框的宽度除了您指定的高度/宽度之外。因此，在您的示例中，页面上框的实际高度和宽度将为 52 像素。
CSSLint 警告您这一点，因为您可能没有意识到这一点，因此您的布局可能不完全符合预期。
如果您意识到这一点并且已在布局中考虑到这一点，那么您可以取消选中 CSSLint 中的“谨防损坏的盒模型”复选框来抑制此警告。
顺便说一句，这同样适用于
padding。This is a warning, not an error, so you're fine!
What it's warning you about is that in the standard box model, the width of the
borderis in addition to the height/width you specify.So in your example, the actual height and width of the box on the page will be 52 pixels.
CSSLint is warning you about this because its possible that you may not realise this, and your layout may thus not be quite as intended.
If you are aware of this and you've taken it into account in your layout, then you can untick the "Beware of broken box model" checkbox in CSSLint to supress this warning.
The same applies to
padding, by the way.旧的 Internet Explorer 版本（相对于其他版本）使用不同的方式来计算事物的宽度。旧的 IE 测量了盒子，包括其填充和边框，新的 IE 测量了不包括填充和边框的内容的大小。为了确保您的网站在两种类型的盒模型中显示一致，您可以选择在应用于同一元素的样式中不使用填充/边框和宽度/高度。
Old Internet Explorer versions (vs. everything else) use a different way of calculating the width of things. Old IE measured the box including its padding and border, new stuff measures the size of the content without the padding and border. To be sure your site will display consistently across both types of box model you can choose to not have padding/border and width/height in a style applied to the same element.