盒模型是頁面布局中非常重要的一個概念，每個元素都可以看做一個矩形盒子，并且這個盒子由四個部分構成：內容區域、內邊距區域、邊框區域和外邊距區域。

因此，當我們在css中設置一個元素的寬度和高度時，實際上是設置了這個元素的內容區域的寬度和高度。但是，我們可以通過css中的盒模型屬性來改變這個行為。

.box{
width: 200px;
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box;
}

在上述代碼中，我們定義了一個名為.box的元素，并將其寬度和高度設置為200px，內邊距設置為20px，邊框設置為1px的實心黑色，外邊距設置為20px。但最后一個屬性是我們本次要講的盒模型屬性——box-sizing。

當我們將box-sizing設置為border-box時，元素的寬度和高度就會包含內邊距和邊框，即盒模型的全部大小。這樣我們就不需要再手動調整元素的寬度和高度來適應內部元素的大小了。

除了border-box之外，還有另外一個常見的盒模型屬性——content-box。這個屬性表示元素的寬度和高度僅包含內容區域的大小，而不包括內邊距和邊框。

在實際使用中，我們可以根據需要來選擇盒模型屬性，以便更好地控制元素的大小和布局。