CSS div重構（CSS Div Refactoring）是一種在網頁開發中常用的技術，通過將頁面中的元素用<div>標簽包裹起來，使得網頁的結構更加清晰，便于樣式的定制和調整。本文將通過幾個代碼案例詳細解釋和說明CSS div重構的使用方法和優點。

第一個案例是一個簡單的頁面布局，包含一個頭部、一個導航欄和一個內容區域。初始的html代碼如下：

<div id="header">
<h1>網頁標題</h1>
</div>
<br>
<div id="nav">
<ul>
<li>導航選項1</li>
<li>導航選項2</li>
<li>導航選項3</li>
</ul>
</div>
<br>
<div id="content">
<p>頁面內容</p>
</div>

可以看到，每個元素都被直接放置在<div>中，使得結構復雜，難以管理和修改。我們可以對其進行div重構，將其改寫為下面的形式：

<div id="header">
<div class="container">
<h1>網頁標題</h1>
</div>
</div>
<br>
<div id="nav">
<div class="container">
<ul>
<li>導航選項1</li>
<li>導航選項2</li>
<li>導航選項3</li>
</ul>
</div>
</div>
<br>
<div id="content">
<div class="container">
<p>頁面內容</p>
</div>
</div>

通過添加一個名為"container"的<div>容器，使得每個元素都被包裹在一個通用的容器中，結構更加清晰。同時，我們可以通過CSS樣式對.container進行定制，實現全局的樣式調整。例如：

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

上述代碼將.container容器的最大寬度限制為1200像素，使其居中顯示，并設置了20像素的內邊距。通過這樣的設置，我們只需要修改.container的樣式，即可改變整個頁面的布局和樣式。

第二個案例是一個展示圖片的網頁。初始的html代碼如下：

<div id="gallery">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

我們可以對其進行div重構，將其改寫為下面的形式：

<div id="gallery">
<div class="image-container">
<img src="image1.jpg">
</div>
<div class="image-container">
<img src="image2.jpg">
</div>
<div class="image-container">
<img src="image3.jpg">
</div>
</div>

通過添加一個名為"image-container"的<div>容器，使每張圖片都被包裹在一個統一的容器中，方便樣式的調整和管理。例如，我們可以設置.image-container的樣式，使圖片居中顯示，并添加一些邊距和樣式：

.image-container {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
background-color: #f5f5f5;
}

上述代碼將.image-container的文字居中對齊，添加了10像素的內邊距，1像素的邊框，并設置了背景顏色。通過這樣的設置，我們可以方便地調整圖片的樣式和布局。

總之，CSS div重構技術能夠提高網頁的結構清晰度和樣式管理性，方便網頁的布局和調整。通過適當地使用<div>容器和相關的CSS樣式，我們可以輕松地改變整個頁面的布局和樣式。