在CSS中，了解盒子模型是非常重要的。盒子模型是描述一個元素如何占據相應空間的模型。

CSS盒子模型包括4個部分：內邊距（padding）、邊框（border）、外邊距（margin）和內容（content）。盒子模型的寬度可通過以下公式計算：

width = 內容寬度（content width） + 左右內邊距（left/right padding）+ 左右邊框寬度（left/right border） + 左右外邊距（left/right margin）

假設有以下例子：

div {
width: 300px;
border: 2px solid black;
padding: 20px;
margin: 10px;
}

在上面的例子中，如果div元素中設置了300px的寬度，加上左右內邊距40px（20px + 20px），左右邊框寬度4px（2px + 2px），左右外邊距20px（10px + 10px），盒子模型的總寬度為384px。也就是說，盒子模型的寬度由內容、內邊距、邊框和外邊距共同構成。

在實際應用中，必須要清楚你的盒子模型的寬度是多少，以便在頁面設計時應用適當的布局。例如，如果你需要在頁面中設置兩個元素并排，它們的寬度之和必須等于它們所在父元素的寬度，否則不會顯示正確的效果。

在一些情況下，我們可能只想要元素的內容寬度，并取消其他部分，可以使用box-sizing屬性。有兩個可選值：content-box（默認值）和border-box。如果使用border-box，則尺寸包括內邊距和邊框，并且盒子的大小不會再超出我們設定的寬度。

div {
width: 300px;
border: 2px solid black;
padding: 20px;
margin: 10px;
box-sizing: border-box;
}

通過設置box-sizing: border-box，div的總寬度將保持為300px，包括了邊框和內邊距的大小。這樣，我們可以更輕松地控制元素的寬度，而不會被邊距和邊框誤導。