<div>布局是CSS中常用的一種布局方式，通過使用<div>元素來創建網頁布局。在HTML中，<div>元素被用于指定一個獨立的區域，該區域可以有自己的樣式和內容。通過使用CSS來設置<div>元素的屬性，我們可以實現各種不同的布局效果。
<div>布局通過使用CSS的position屬性和display屬性來實現。position屬性用于設置元素在文檔中的位置，包括靜態、相對、絕對和固定四種方式。display屬性用于設置元素的顯示方式，包括塊級元素和內聯元素兩種方式。
下面是幾個使用<div>布局的代碼案例，詳細解釋了如何實現各種布局效果。
1. 垂直居中布局
使用<div>布局可以很容易實現垂直居中的效果。，將要居中的元素包裹在一個<div>元素中，并設置該<div>元素的display屬性為flex，然后使用align-items屬性將子元素垂直居中。

<pre>
<div style="display: flex; align-items: center; height: 400px;">
<div style="margin: auto;">
內容
</div>
</div>

通過上述代碼，可以將內容水平和垂直居中顯示。通過設置<div>元素的height屬性，可以調整垂直居中的效果。
2. 兩欄布局
另一個常見的<div>布局是兩欄布局，其中一欄寬度固定，另一欄寬度自適應。可以通過設置一個父<div>元素，然后將兩個子<div>元素放在其中，一個子元素設置固定寬度，另一個子元素不設置寬度。

<pre>
<div style="display: flex;">
<div style="width: 200px;">固定寬度</div>
<div style="flex: 1;">自適應寬度</div>
</div>

通過上述代碼，可以實現一個左側寬度固定，右側寬度自適應的兩欄布局。
3. 網格布局
<div>布局還可以實現網格布局的效果。通過創建一個父<div>元素，然后在其中使用多個子<div>元素來創建網格布局。

<pre>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
<div style="background-color: #ff0000;">1</div>
<div style="background-color: #00ff00;">2</div>
<div style="background-color: #0000ff;">3</div>
</div>

通過上述代碼，可以實現一個三列的網格布局，每個子元素的寬度平均分配，并且之間有10像素的間隔。
：
<div>布局是一種常見的CSS布局方式，可以通過使用<div>元素和CSS的position屬性和display屬性來實現各種不同的布局效果。通過垂直居中布局、兩欄布局和網格布局的案例，我們可以看到<div>布局的靈活性和可擴展性。如果你想要在網頁中實現特定的布局效果，<div>布局將是一個不錯的選擇。