文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 译文内容不定期更新~ 返回目录
盒子模型是CSS当中最常误解的内容之一。"盒子模型 (Box model)"会参考一系列盒子属性来最终确定元素的显示。盒子的最里层为 内容。内容被内边距包裹,内边距之外再由边框包裹。盒子最终的宽度也就由以上的属性相互影响,是不是有些小困惑。来,看下面的例子:
.mybox {
border: 1px solid black;
padding: 5px;
width: 100px;
}
新手可能会觉得拥有mybox类的元素宽度为100像素。但实际上呢,宽度是112像素,这是因为宽度最终由 内容 内边距 边框相加而得。当开发人考虑到以上属性组合时,也会因为不同的想法行为产生错误。
通过将box-sizing属性值设置为border-box,可以使绝大多数游览器(现代游览器)遵循 宽高是 元素本身的大小,例子如下:
.mybox {
box-sizing: border-box;
border: 1px solid black;
padding: 5px;
width: 100px;
}
那么现在,这个拥有mybox类的元素,实际宽度就为100像素了,内边距与边框 将占据其中的空间,剩下的88像素将是内容的宽度.
规则详情
规则 ID: box-model
此规则 意在消除潜在的盒子模型大小问题。因此,规则将在以下情况出现警告:
1.width被与border,border-left,border-right,padding,padding-left,padding-right属性同时使用时
2.height被与border,border-top,border-bottom,padding,padding-top,padding-bottom属性同时使用时
如果box-sizing属性已指定,则假定你已非常清楚盒子模型的规则,以上的情况,此规则将不会出现警告。
以下的例子将会出现警告:
/* width and border */
.mybox {
border: 1px solid black;
width: 100px;
}
以下的例子将 不会 出现警告:
/* width and border with box-sizing */
.mybox {
box-sizing: border-box;
border: 1px solid black;
width: 100px;
}
/* width and border-top */
.mybox {
border-top: 1px solid black;
width: 100px;
}
/* height and border-top of none */
.mybox {
border-top: none;
height: 100px;
}
