CSS 盒子模型是指將 HTML 元素表示為一個(gè)矩形盒子，并確定元素在頁(yè)面上位置的一種方式。理解盒子模型對(duì)于 CSS 的學(xué)習(xí)和使用非常重要。 盒子模型包括了四個(gè)部分：內(nèi)邊距、邊框、外邊距和內(nèi)容。其中，內(nèi)容是指元素的文字、圖像和其他嵌套的元素；內(nèi)邊距是元素內(nèi)容和邊框之間的空間；邊框是元素的邊框線；外邊距是元素與相鄰元素之間的距離。 下面是一個(gè)典型的 CSS 盒子模型的示例：

div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}

在這個(gè)例子中，`div` 元素表示為一個(gè) 200 像素寬、100 像素高的矩形。元素有 20 像素的內(nèi)邊距，5 像素寬的黑色實(shí)線邊框和 10 像素的外邊距。 要理解盒子模型的計(jì)算方式，可以使用以下公式： total element width = width + left padding + right padding + left border + right border + left margin + right margin total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 例如，在上述代碼中，該元素的總寬度為： 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270 像素 該元素的總高度為： 100 + 20 + 20 + 5 + 5 + 10 + 10 = 170 像素 當(dāng)了解了盒子模型的計(jì)算方式之后，可以更好地理解和控制元素在頁(yè)面上的布局。 總體而言，CSS 盒子模型是控制元素位置和布局的基礎(chǔ)。通過(guò)理解和運(yùn)用盒子模型，可以更好地控制和定位 HTML 元素，實(shí)現(xiàn)更靈活和美觀的頁(yè)面設(shè)計(jì)。