Disallow box sizing (不允许使用 盒子大小)

文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 译文内容不定期更新~ 返回目录

CSS的box-sizing属性用来定义 边框,内边距,宽度和高度是如何相互影响彼此的。此属性默认值为content-box,意思是 宽和高是有元素内容本身决定,接着 内边距与边框 再将内容包裹上。请看以下例子:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

这个盒子的实际宽度为112像素。这是因为内容将占据100像素的宽度,然后内容两侧分别加上5像素的内边距,接着两侧再加上1像素的边框。

当你将box-sizing的属性值改变至border-box时,计算方式则不同了:

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

此盒子的实际宽度为100像素而其中供内容的可用空间为88像素(100-5px[左]内边距-5px[右]内边距-1px[左]边框-1px[右]边框)。大多数情况下认为border-box的设置更加合乎逻辑也更像此属性表达的含义。

但是呢但是呢,在使用box-sizing时会有个小小的问题,也就是IE6 IE7是不支持box-sizing这个属性的。因此会展示出不同于盒子模型设置属性的效果。

规则详情

规则 ID: box-sizing

此规则在box-sizing属性使用时会出现警告。其含义即 提示开发者 此属性在IE6 IE7或更早期的游览器上得不到支持。

以下示例将会出现警告:

.mybox {
    box-sizing: border-box;
}

.mybox {
    box-sizing: content-box;
}