CSS盒子模型（Box Model）是CSS中的基本概念之一，用于描述HTML元素的尺寸和布局。

CSS盒子模型將HTML元素看做是一個矩形的盒子，分為四個部分：外邊距(margin)、邊框(border)、內(nèi)邊距(padding)和內(nèi)容(content)。

盒子的寬度(width)由內(nèi)容(content)、內(nèi)邊距(padding)和邊框(border)三部分組成，而盒子的高度(height)同樣也是由這三部分組成。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}

在上面的示例中，盒子的總寬度為200 + 2 * (10 + 2) + 2 * 20 = 284px，總高度為100 + 2 * (10 + 2) + 2 * 20 = 164px。

若僅想改變盒子的內(nèi)容(content)區(qū)域的寬度和高度，可以使用box-sizing屬性設置為border-box，這樣設置后，盒子的寬度和高度就只包括內(nèi)容(content)和內(nèi)邊距(padding)部分，邊框(border)和外邊距(margin)部分不再影響盒子寬度和高度的計算。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
box-sizing: border-box;
}

在上面的示例中，當設置了box-sizing: border-box;后，盒子的總寬度為200px，總高度為100px，其中border和padding部分都被包含在寬度和高度的計算中。

通過盒子模型的概念，可以更好地掌控HTML頁面的布局和樣式。