在CSS中，我們除了定義元素的樣式外，還可以通過控制元素的盒子模型來達到不同的排版效果。盒子模型被分為內邊距、邊框、外邊距以及內容區，不同的盒子模型組成了一個元素的實際大小。

在HTML頁面中，每個元素都有一個默認的盒子模型。但是我們可以通過CSS來進行修改和設置盒子模型的大小。一個盒子模型的大小，實際上由四個屬性組成：width、height、padding和border。

.box {
width: 250px;
height: 200px;
padding: 20px;
border: 2px solid black;
}

在上面的代碼中，我們創建了一個名為.box的CSS類，它的寬度為250px，高度為200px,內邊距為20px,邊框為2px實心黑色。此時元素實際的大小為324px*244px。具體計算公式如下：

內容區大小 = 盒子模型寬度（width） - 左右內邊距（padding） - 左右邊框（border）   
盒子高度 = 盒子模型高度（height） - 上下內邊距（padding） - 上下邊框（border）

通過計算可以看出，實際大小值可能不同于我們所定義的盒子模型的大小值，因為實際大小值還需要計算內邊距和邊框的尺寸。

在Web開發中，我們需要清楚元素的實際大小。只有了解了元素的實際大小，才能更好的進行頁面排版和布局，實現頁面的最佳性能。