CSS盒子模型是CSS布局的基礎(chǔ)，它可以將HTML元素看作是一個(gè)盒子，通過(guò)調(diào)整盒子的尺寸、位置、形狀等屬性，來(lái)實(shí)現(xiàn)頁(yè)面的布局，在CSS中，盒子模型可以通過(guò)以下步驟來(lái)創(chuàng)建：

1、創(chuàng)建一個(gè)HTML元素，比如一個(gè)div元素。

2、使用CSS為該元素添加樣式，包括盒子的尺寸、位置、形狀等屬性。

3、將其他HTML元素添加到該div元素中，形成盒子內(nèi)部的內(nèi)容。

下面是一個(gè)簡(jiǎn)單的CSS盒子模型的例子：

HTML代碼：

<div class="box">
  <p>這是一個(gè)CSS盒子模型的例子</p>
</div>

CSS代碼：

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  padding: 20px;
  margin: 30px;
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為“box”的div元素，并使用CSS為它添加了樣式，該盒子模型的尺寸為寬200像素、高100像素，背景顏色為#f0f0f0，邊框顏色為#000，內(nèi)邊距為20像素，外邊距為30像素，盒子內(nèi)部的內(nèi)容為一個(gè)p元素，內(nèi)容為“這是一個(gè)CSS盒子模型的例子”。

通過(guò)CSS盒子模型，我們可以輕松地控制HTML元素的布局，實(shí)現(xiàn)頁(yè)面的美觀和功能性。