div布局是一種常用的網頁布局方式，可以用于將網頁內容劃分為多個獨立的區塊，并通過CSS樣式進行定位和排版。通過使用div元素和CSS樣式，可以實現網頁元素的靈活排列和定位。下面我們來通過幾個代碼案例詳細解釋說明div布局。

案例1：簡單的三欄布局

<style>
.container {
display: flex;
}
.left {
width: 200px;
}
.main {
flex-grow: 1;
margin: 0 20px;
}
.right {
width: 200px;
}
</style>
<br>
<div class="container">
<div class="left">左側欄</div>
<div class="main">主內容區</div>
<div class="right">右側欄</div>
</div>

在上述代碼中，我們使用了一個名為.container的div元素作為布局的容器，并將其display屬性設置為flex，這樣可以創建一個flex容器。通過為左側欄(.left)和右側欄(.right)設置固定的寬度，再為主內容區(.main)設置flex-grow: 1，使其占據剩余的空間，從而實現了簡單的三欄布局。

案例2：網格布局

<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ccc;
text-align: center;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

在上述代碼中，我們使用了一個名為.container的div元素作為布局的容器，并將其display屬性設置為grid，這樣可以創建一個網格布局。通過設置grid-template-columns屬性為repeat(3, 1fr)，我們將容器分為3列，每列的寬度都為1fr（平均分配剩余空間）。通過設置grid-gap屬性為10px，我們為每個網格添加了10px的間隔。這樣，我們得到了一個簡單的網格布局。

案例3：媒體查詢

<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 50%;
}
@media only screen and (max-width: 600px) {
.item {
width: 100%;
}
}
</style>
<br>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

在上述代碼中，我們使用了一個名為.container的div元素作為布局的容器，并將其display屬性設置為flex，這樣可以創建一個flex容器。通過設置flex-wrap屬性為wrap，我們使得.flex容器中的.item元素可以自動換行。然后，我們使用@media媒體查詢來針對不同的屏幕寬度設定樣式。當屏幕寬度小于或等于600px時，.item元素的寬度將變為100%。

div布局是一種靈活且常用的布局方式，可以通過簡單的代碼實現復雜的網頁布局效果。通過上述案例，我們可以看到使用div布局可以實現三欄布局、網格布局以及響應式布局等多種布局方式，滿足不同的設計需求。