文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 译文内容不定期更新~ 返回目录
只要你开心,你可以在CSS中定义任意的组合规则,但是呢,其中有些规则会因为 元素设置了display属性而忽略你所设置的规则。这会导致你的CSS文件中出现脏代码,同时 误解了规则理应如何运转的。
当 display:inline时, width,height,margin-top,margin-bottom,和float属性的设置 将不会起到作用,因为 内联(inline)元素不是一个盒子模型,也就无从设置这些属性。而 margin-left和margin-right依旧能起效是为了保证 缩进 的目的,其它的外边距(margin) 设置则起不到效果。float属性有时会用作修复 IE6 double-margin bug.
其它基于display的情形有:
-
display:inline-block不应与float同时使用。 -
display:block不应与vertical-align同时使用。 -
display:table-*不应与margin' 或float` 同时使用。
移除这些会被忽略或有问题的属性,能减小文件体积从而改善性能。
规则详情
规则 ID: display-property-grouping
此规则 将标识出 与display属性同时使用 而不起效的属性。其目的是使CSS文件更精简,更清晰而无多余代码。那么,检测出以下代码时,提示警告:
-
display:inline与width,height,margin,margin-top,margin-bottom,float。 -
display:inline-block与float同时使用。 -
display:block与vertical-align同时使用。 -
display:table-*与margin' 或float` 同时使用。
以下示例将提示警告:
/* inline with height */
.mybox {
display: inline;
height: 25px;
}
/* inline-block with float */
.mybox {
display: inline-block;
float: left;
}
/* table-cell and margin */
.mybox {
display: table-cell;
margin: 10px;
}
以下示例将 不会 提示警告:
/* inline with margin-left */
.mybox {
display: inline;
margin-left: 10px;
}
/* table and margin */
.mybox {
display: table;
margin-bottom: 10px;
}
