CSS中設(shè)置width屬性時(shí)，是否包含邊框呢？這是一個(gè)常見(jiàn)的問(wèn)題，下面我們來(lái)詳細(xì)討論一下。

div {
box-sizing: content-box;
width: 200px;
border: 1px solid black;
}

在上面的代碼中，我們?cè)O(shè)置了一個(gè)div元素的寬度為200px，并加上了1px的邊框。box-sizing屬性設(shè)置為content-box，表示width屬性不包括padding和border。

結(jié)果，這個(gè)div元素的總寬度為202px，因?yàn)?00px的width不包括1px的左右邊框，而padding為0px。

div {
box-sizing: border-box;
width: 200px;
border: 1px solid black;
}

現(xiàn)在我們將box-sizing屬性設(shè)置為border-box，表示width屬性包括padding和border。結(jié)果，這個(gè)div元素的總寬度為200px，因?yàn)?00px的width包括了1px的左右邊框，而padding為0px。

如果您不確定要使用哪種方式，請(qǐng)仔細(xì)考慮效果。如果您希望元素的大小包括邊框和內(nèi)邊距，請(qǐng)使用border-box。如果您希望元素的大小只包括內(nèi)容，請(qǐng)使用content-box。