在進行頁面布局時，了解CSS盒狀模型非常重要。盒狀模型指的是頁面元素以矩形盒子的形式存在，包含有四個區域：內容區域、內邊距區域、邊框區域、外邊距區域。這四個區域都是由CSS樣式控制的。

.box {
width: 100px; /* 設置寬度 */
height: 100px; /* 設置高度 */
padding: 10px; /* 設置內邊距 */
border: 1px solid #000; /* 設置邊框 */
margin: 10px; /* 設置外邊距 */
}

在上述代碼中，我們可以看到box這個類名的元素的寬度為100px，高度也為100px。同時，存在10px的內邊距、1px的黑色實線邊框以及10px的外邊距。

可以發現，包含著內容的區域是內容區域，而不是整個元素的寬高。在這個例子中，內容區域的寬度和高度，只有80px，這是因為10px的內邊距讓內容區域減小了20px。

如果你需要了解更多CSS盒狀模型的相關知識，可以深入學習如何控制內邊距、邊框和外邊距以達到頁面布局和設計的目的。