CSS盒子模型是指一個(gè)HTML元素所呈現(xiàn)出來(lái)的矩形框，其中包含了多個(gè)不同的內(nèi)容。這個(gè)模型主要由四個(gè)部分組成：外邊距(margin)、邊框(border)、內(nèi)邊距(padding)和內(nèi)容(content)。這四個(gè)部分可以用CSS樣式來(lái)定義，從而控制盒子的大小和外觀。

.box {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
}

上面的代碼定義了一個(gè)200x200像素大小的盒子，它有10像素的外邊距、1像素的灰色實(shí)線邊框和10像素的內(nèi)邊距。這個(gè)盒子的內(nèi)容區(qū)域是180x180像素，因?yàn)檫吙蚝蛢?nèi)邊距消耗了一部分空間。

如果想要在網(wǎng)頁(yè)中平鋪多個(gè)盒子，可以使用CSS的浮動(dòng)(float)屬性和寬度(width)屬性來(lái)實(shí)現(xiàn)。在一個(gè)盒子浮動(dòng)之后，它會(huì)盡可能地向左或者向右對(duì)齊，然后依次排列下去。

.box1 {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
float: left;
}
.box2 {
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
float: left;
}

上面的代碼定義了兩個(gè)大小相同的盒子，并且都使用了浮動(dòng)屬性。這兩個(gè)盒子會(huì)在同一行上排列，并且它們之間會(huì)有10像素的間距。如果再增加一個(gè)盒子，它會(huì)自動(dòng)換行到下一行。

總的來(lái)說(shuō)，CSS盒子模型是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的概念，可以用來(lái)控制網(wǎng)頁(yè)布局和排版，讓網(wǎng)頁(yè)更加美觀和易于閱讀。