CSS是網頁開發中不可或缺的一部分，使用CSS能夠讓網頁的樣式變得更加美觀和靈活，div布局也是CSS中的一大亮點，下面我們來學習一下如何使用CSS中的div布局。

首先我們需要在HTML文件中添加一個div元素，代碼如下：

<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

上面的代碼中，我們創建了一個id為container的div元素和三個class為box的div元素，其中container是我們用來包裹box元素的容器。

接下來我們需要使用CSS來定義這些元素的樣式，代碼如下：

#container {
width: 960px;
margin: 0 auto;
}
.box {
width: 300px;
height: 200px;
float: left;
margin-right: 20px;
background-color: #ccc;
}
.box:last-child {
margin-right: 0;
}

上面的代碼中，我們為container元素設置了一個寬度，居中顯示。然后我們為box元素設置了固定的寬度和高度，并使用float屬性將它們按照從左到右的順序排列。最后我們使用margin-right屬性在每個box元素之間添加了20px的間距，同時使用:last-child選擇器為最后一個box元素去掉了右邊的間距。

這樣在瀏覽器中預覽我們的頁面時，就會看到一個寬度為960px的帶有三個相同寬度的box元素的容器了。

總的來說，我們可以利用CSS中的div布局實現非常靈活的布局，通過不同的選擇器和屬性，我們可以輕松地控制元素的位置、大小和樣式，使得網頁呈現出更加美觀和豐富的效果。