CSS的box模型屬性是用來(lái)定義HTML元素的尺寸和布局的。這個(gè)模型將元素看作是一個(gè)矩形框，由四個(gè)部分組成：內(nèi)容區(qū)、內(nèi)邊距、邊框和外邊距。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}

以上的CSS代碼將會(huì)限定一個(gè)元素的寬度為200像素，高度為100像素，并且在其中添加10像素大小的內(nèi)邊距、2像素黑色實(shí)線邊框以及20像素的外邊距。

下面是每個(gè)部分的詳細(xì)解釋：

• 內(nèi)容區(qū)：元素的實(shí)際內(nèi)容
• 內(nèi)邊距：內(nèi)容和邊框之間的距離
• 邊框：包圍內(nèi)容和內(nèi)邊距的線條
• 外邊距：元素與其它元素之間的距離

這些屬性都是可以被單獨(dú)設(shè)置的，例如您完全可以只設(shè)置邊框的大小并且去除內(nèi)邊距：

.box {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 0;
margin: 20px;
}

這個(gè)代碼將會(huì)得到一個(gè)與之前相同尺寸的元素，但是內(nèi)部沒有內(nèi)邊距。

這個(gè)box模型屬性是非常有用的，可以幫助我們對(duì)元素的樣式和布局進(jìn)行更精細(xì)的控制。