盒子模型是CSS中一種非常重要的概念，它是指每個HTML元素都由一個矩形的盒子包圍著。在這個盒子中，包含了元素的內容、內邊距、邊框以及外邊距。

/* 盒子模型示例 */
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

上述代碼表示一個盒子，寬200px，高100px，內邊距為10px，邊框為1px實線黑色，外邊距為20px。此時，實際占據空間的大小為232px*142px，包括內容區域、內邊距、邊框和外邊距。

如果想要使盒子的大小僅包含內容區域和內邊距，可以使用box-sizing屬性：

/* 使盒子大小僅包含內容區域和內邊距 */
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
box-sizing: border-box;
}

上述代碼中，box-sizing設置為border-box，這表示內邊距、邊框都會包含在元素的寬度和高度中，這樣我們就可以更方便地進行布局了。

在使用盒子模型時，需要注意到盒子之間的外邊距會疊加，這意味著如果兩個盒子相鄰，它們之間的間隔將取最大的那個盒子的外邊距值，而不是兩者之和。

/* 外邊距疊加示例 */
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}

上述代碼中，box1和box2相鄰，它們之間的間隔將取30px（box2的外邊距值）而不是50px（box1和box2外邊距之和）。

最后，再提一句，盒子模型是CSS中非常基礎的一部分，學好盒子模型是進行頁面布局的基礎。