CSS 盒子模型是 CSS 基礎的重點困難，因此常被面試官們拿來考察候選人對前端基礎的掌握程度，這篇文章將對 CSS 盒模型知識點進行全面的梳理。
我們先看個例子：下面的 div 元素的總寬度是多少呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 盒模型(https://github.com/webharry/fe-interview)</title>
<style>
div {
background-color: lightgrey;
width: 200px;
border: 10px solid yellow;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。有 10px 内间距，20px 外间距、10px 黄色边框。</div>
</body>
</html>要回答這個問題，我們必須先弄清楚 CSS 盒模型。
每個HTML元素都由一個矩形框（盒子）組成，稱為盒子模型。 CSS 盒子模型定義了一個 HTML 元素的尺寸和邊距。
CSS 中組成一個盒子需要：
width 和 height。 padding 相關屬性設定。 border 相關屬性設定。 margin 相關屬性設定。 如圖所示：
這兩種盒模型的差異在於它們如何計算元素的寬度和高度，以及如何處理元素的內邊距、邊框和外邊距。
重要: 當您指定一個CSS 元素的寬度（width）和高度（height ）屬性時，你只是設定內容區域（content）的寬度和高度。
可以透過設定 CSS 的 box-sizing 屬性來指定要使用哪種盒子模型。預設情況下，box-sizing 屬性的值為 content-box，即使用標準盒模型。可以將其設定為 border-box，即使用全面梳理下CSS盒模型的相關知識點。
現在，我們再來看文章開頭的例子，答案顯而易見。因為在預設情況下，box-sizing 屬性的值為 content-box，即使用標準盒模型。所以範例中的 div 元素總寬度是 200 10x2 10x2=240px。
（學習影片分享：web前端）
以上是全面梳理下CSS盒模型的相關知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
