CSS盒子模型可以將網頁中的各種元素看做是置于一個盒子中的。每個盒子都有自己的屬性，包括寬度（width）、高度（height）、內邊距（padding）、外邊距（margin）等，這些屬性共同構成了CSS盒子模型。

.box {
width: 200px;
height: 100px;
padding: 10px;
margin: 20px;
}

盒子的寬度和高度就是元素本身的寬度和高度。內邊距指的是元素內部的空白區域，其位置在元素邊框與元素內容之間。而外邊距則是指元素與其它元素之間的空白區域，其位置在元素邊框與相鄰元素之間。這些元素可以通過盒子模型的屬性進行調整。 在盒子模型中，寬度和高度屬性只是元素本身的寬度和高度，不包括內外邊距。若要計算元素真實的寬度和高度，需要將內外邊距加入計算。

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

border屬性也是盒子模型中的一個屬性。它可以用來設置元素的邊框，并具有一定的粗細、樣式和顏色。效果如上代碼所示。 CSS盒子模型是網頁布局中的基礎知識。只要理解了其內外邊距、寬高以及邊框的原理，將可輕松掌握網頁布局的要領。