Web前端中，CSS作為前端開發的一大重要技術，盒模型則是其中的一個基礎和核心的概念。盒模型是指，每個元素都被表示為一個矩形框，內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)組成了一個完整的“盒子”。

/* 盒子結構 */
{
content: "內容",
padding: 10px,
border: 1px solid #ccc,
margin: 20px
}

其中，內容(content)指盒子內部的內容，內邊距(padding)緊貼內容，使內容與邊框之間產生間隔，邊框(border)是一個圍繞內容和內邊距的線條，外邊距(margin)指的是盒子與其它元素之間的空白區域。

/* 只有內容和內邊距的盒子 */
{
content: "內容",
padding: 10px
}
/* 帶有邊框的盒子 */
{
content: "內容",
padding: 10px,
border: 1px solid #ccc
}
/* 帶有外邊距的盒子 */
{
content: "內容",
padding: 10px,
border: 1px solid #ccc,
margin: 20px
}

在CSS中，盒模型的尺寸是由內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)四部分組成的。而CSS中的盒子大小(width和height)默認只包括內容(content)，不包括內邊距(padding)和邊框(border)。我們可以使用box-sizing屬性來改變盒子大小的計算方式。

/* 尺寸包括內邊距(padding)和邊框(border) */
{
box-sizing: border-box;
}
/* 尺寸僅包括內容(content) */
{
box-sizing: content-box;
}

通過使用盒子模型，我們可以更好的控制元素的尺寸、間距以及位置，從而更好的實現網頁布局和設計效果。