文章為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;
}