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

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

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

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

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