CSS的盒模型（Box Model）是指在Web頁面上所有的HTML元素都被看做是一個(gè)個(gè)的矩形框。該模型可以幫助我們了解，一個(gè)元素的內(nèi)容、邊框、內(nèi)填充和外邊距是如何影響并決定其在Web頁面上所占的尺寸和位置的。

/* 盒模型的默認(rèn)樣式 */
box-sizing: content-box; /* 默認(rèn)值，元素尺寸為內(nèi)容尺寸加上內(nèi)邊距和邊框 */
/* 另一個(gè)可選值為border-box（元素尺寸為內(nèi)容尺寸加上內(nèi)邊距和邊框） */

一個(gè)CSS盒模型通常包含以下四個(gè)部分：

• Content（內(nèi)容）：元素的“盒子”中的實(shí)際內(nèi)容，包括文本、圖片、飾品等。
• Padding（內(nèi)填充）：可選項(xiàng)，用于填充內(nèi)容區(qū)域和邊界之間的間距。
• Border（邊框）：可選項(xiàng)，用于分隔填充區(qū)域和外邊界。
• Margin（外邊距）：元素和其鄰近元素之間的空白區(qū)域。

/* 盒模型的屬性樣式 */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}

寫作CSS樣式時(shí)，我們可以考慮如何使用各種盒模型屬性來控制元素尺寸和間距的大小。例如，可以通過增加內(nèi)容內(nèi)填充來增加元素的尺寸，或通過增加外邊距來增加元素與其鄰近元素之間的間距。