在理解 CSS 盒子模型的概念之前，我們需要先了解 CSS 中幾個概念：元素寬度、邊框、內邊距和元素高度。元素寬度是元素的內容區域寬度，不含邊框、內邊距和外邊距。邊框是元素內容區域的外延。內邊距是元素內容區域和邊框之間的距離。元素高度包括內容區域、內邊距、邊框和可選的外邊距。
CSS 盒子模型實際包括兩種模型：W3C 標準模型和 IE 怪異盒子模型。 W3C 標準模型中，元素的寬度和高度只包括內容區域。IE 怪異盒子模型中，元素的寬度和高度包括了內容區域、內邊距和邊框。
下面我們通過一個 pre 標簽中的代碼示例來說明 W3C 標準模型和 IE 怪異盒子模型的區別：
Some text in a paragraph.
.box {
width: 500px;
height: 200px;
padding: 20px;
border: 2px solid black;
}
在上面的代碼中，我們定義了一個 div 元素，包含一個 p 元素。div 元素的寬度是 500px，高度是 200px，內邊距是 20px，邊框是 2px 實心黑色。我們可以發現，div 元素的實際高度是 244px（200px 減去上下內邊距各 20px，再減去上下邊框各 2px）。
如果我們使用 IE 怪異盒子模型，實際高度將會是 240px（200px 作為內容區域高度，再加上上下內邊距各 20px，和上下邊框各 2px）。這個值比 W3C 標準模型下高度多了 4px。
因此，在進行網頁布局時，我們需要清楚盒子模型的差異，以便正確的計算可見高度，避免布局錯誤。在實際應用中，我們可以使用 box-sizing 屬性來指定盒子模型，其屬性值包括 content-box 和 border-box，分別對應 W3C 標準模型和 IE 怪異盒子模型。
.box {
width: 500px;
height: 200px;
padding: 20px;
border: 2px solid black;
}