文章為csslint中文版譯文竿开，點(diǎn)擊原文可查看英文版密强，如遇到翻譯錯(cuò)誤或錯(cuò)別字啥的汰蓉，請(qǐng)留言指出~ 譯文內(nèi)容不定期更新~ 返回目錄
CSS的box-sizing屬性用來(lái)定義 邊框,內(nèi)邊距,寬度和高度是如何相互影響彼此的近零。此屬性默認(rèn)值為content-box,意思是 寬和高是有元素內(nèi)容本身決定,接著 內(nèi)邊距與邊框 再將內(nèi)容包裹上副砍。請(qǐng)看以下例子:
.mybox {
border: 1px solid black;
padding: 5px;
width: 100px;
}
這個(gè)盒子的實(shí)際寬度為112像素坡倔。這是因?yàn)閮?nèi)容將占據(jù)100像素的寬度,然后內(nèi)容兩側(cè)分別加上5像素的內(nèi)邊距,接著兩側(cè)再加上1像素的邊框漂佩。
當(dāng)你將box-sizing的屬性值改變至border-box時(shí),計(jì)算方式則不同了:
.mybox {
box-sizing: border-box;
border: 1px solid black;
padding: 5px;
width: 100px;
}
此盒子的實(shí)際寬度為100像素而其中供內(nèi)容的可用空間為88像素(100-5px[左]內(nèi)邊距-5px[右]內(nèi)邊距-1px[左]邊框-1px[右]邊框)。大多數(shù)情況下認(rèn)為border-box的設(shè)置更加合乎邏輯也更像此屬性表達(dá)的含義罪塔。
但是呢但是呢,在使用box-sizing時(shí)會(huì)有個(gè)小小的問(wèn)題,也就是IE6 IE7是不支持box-sizing這個(gè)屬性的投蝉。因此會(huì)展示出不同于盒子模型設(shè)置屬性的效果。
規(guī)則詳情
規(guī)則 ID: box-sizing
此規(guī)則在box-sizing屬性使用時(shí)會(huì)出現(xiàn)警告征堪。其含義即 提示開發(fā)者 此屬性在IE6 IE7或更早期的游覽器上得不到支持瘩缆。
以下示例將會(huì)出現(xiàn)警告:
.mybox {
box-sizing: border-box;
}
.mybox {
box-sizing: content-box;
}
