CSS（層疊樣式表）的“盒子模型”（Box Model）是網頁布局設計中最重要的概念之一，使用該概念可以優美地呈現頁面元素。

盒子包圍了元素，它由“content”、“padding”、“border”和“margin”四個區域組成。

.box {
content: " ";
padding: 20px;
border: 2px solid gray;
margin: 10px;
}

“content”區域是元素的實際內容區域。我們可以在該區域內放置文字、圖像和其他元素。

“padding”區域是內容和邊界之間的間隙。設置填充使內容與周圍的邊界保持距離。

“border”區域是從填充到外部邊緣的邊框?？梢允褂肅SS樣式來定制邊框的樣式、顏色和寬度。

“margin”區域是盒子與周圍元素的距離。它類似于填充，但是放置在元素外的區域。

.box {
width: 400px;
height: 200px;
}

CSS盒子模型還定義了元素的寬度和高度。寬度是盒子內容和填充的寬度，而高度是內容、填充、邊框和填充的高度。

使用CSS盒子模型可以輕松地定位網頁元素，為美觀的樣式和布局設計打下基礎。