CSS盒子模型是CSS布局中的核心概念，它描述了HTML元素在頁面布局中所占的空間。每個HTML元素都被視為一個矩形盒子，每個盒子由4個部分組成：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。

下面是一個展示盒子模型的例子：

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

上述CSS代碼定義了一個寬度為200像素、高度為100像素的盒子，它有10像素的內邊距、1像素的邊框和20像素的外邊距。

盒子模型對于頁面布局非常重要。例如，在計算元素的總寬度時，需要將元素的寬度、內邊距、邊框和外邊距相加。

盒子模型可以通過box-sizing屬性進行控制。默認情況下，box-sizing的值為content-box，即元素的寬度和高度只包括內容部分的寬度。如果將box-sizing屬性的值設置為border-box，那么元素的寬度和高度將包括內邊距和邊框的寬度。

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

上述CSS代碼中的box-sizing屬性被設置為border-box，這意味著盒子的寬度和高度包含了內邊距和邊框的寬度。這樣可以更方便地控制元素的整體大小。