CSS盒子模型是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)基礎(chǔ)的概念。它用來(lái)描述元素在網(wǎng)頁(yè)上占據(jù)的空間以及如何布局。

一個(gè)元素在頁(yè)面上所占的空間不僅僅是該元素本身的內(nèi)容，還包括元素的邊框、內(nèi)邊距和外邊距。這些部分的總和就是CSS盒子模型。

.box {
width: 300px;
height: 200px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}

在上面這個(gè)例子中，我們定義了一個(gè)class為box的元素，并設(shè)置了它的寬度為300像素、高度為200像素、邊框粗細(xì)為1像素、內(nèi)邊距為10像素、外邊距為20像素。這個(gè)設(shè)置會(huì)影響到元素在頁(yè)面上所占的區(qū)域。

盒子模型還有一個(gè)重要的用途就是控制布局。我們可以通過(guò)修改元素的盒子屬性來(lái)改變?cè)卦陧?yè)面上的位置。比如，我們可以使用margin屬性來(lái)調(diào)整元素的外邊距，使它在頁(yè)面上垂直或水平居中。

.center {
width: 200px;
height: 200px;
margin: auto;
}

在上面這個(gè)例子中，我們定義了一個(gè)class為center的元素，并設(shè)置了它的寬度為200像素、高度為200像素、外邊距為自動(dòng)，這樣它就可以在頁(yè)面上水平和垂直居中了。

總之，CSS盒子模型是CSS設(shè)計(jì)中必不可少的一個(gè)概念。理解和掌握盒子模型可以幫助我們更好地控制網(wǎng)頁(yè)的布局和樣式。