CSS中設置width屬性時,是否包含邊框呢?這是一個常見的問題,下面我們來詳細討論一下。
div { box-sizing: content-box; width: 200px; border: 1px solid black; }
在上面的代碼中,我們設置了一個div元素的寬度為200px,并加上了1px的邊框。box-sizing屬性設置為content-box,表示width屬性不包括padding和border。
結果,這個div元素的總寬度為202px,因為200px的width不包括1px的左右邊框,而padding為0px。
div { box-sizing: border-box; width: 200px; border: 1px solid black; }
現在我們將box-sizing屬性設置為border-box,表示width屬性包括padding和border。結果,這個div元素的總寬度為200px,因為200px的width包括了1px的左右邊框,而padding為0px。
如果您不確定要使用哪種方式,請仔細考慮效果。如果您希望元素的大小包括邊框和內邊距,請使用border-box。如果您希望元素的大小只包括內容,請使用content-box。
下一篇php qq分享