CSS盒模型是指在頁面上每個HTML元素都被認為是一個矩形的盒子，這個盒子包含著元素的內容、內邊距、邊框和外邊距。

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

上面的CSS代碼定義了一個盒子的屬性，它的寬度為200像素，高度為100像素，在它周圍有一個像素的黑色邊框，內部有20像素的內邊距和10像素的外邊距。

這個盒子的總寬度可以用下面的公式來計算：

總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框寬度 + 右邊框寬度 + 左外邊距 + 右外邊距

相應地，盒子的總高度可以用下面的公式來計算：

總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框寬度 + 下邊框寬度 + 上外邊距 + 下外邊距

所以，根據上面的CSS代碼，這個盒子的總寬度為：200 + 20 + 20 + 1 + 1 + 10 + 10 = 262像素。它的總高度為：100 + 20 + 20 + 1 + 1 + 10 + 10 = 162像素。

理解CSS盒模型對于頁面布局和設計至關重要。您可以使用CSS屬性來控制盒模型的各個方面，包括寬度、高度、內邊距、邊框和外邊距。