<div> 塊狀布局是一種常用的網頁布局方式。在HTML中，<div> 是一種常用的塊級元素，可以用來組織網頁的內容，并靈活地控制元素的樣式和位置。使用<div> 可以實現各種復雜的布局效果，包括網頁的分欄、居中、排版等。在接下來的幾個代碼案例中，我將詳細說明如何使用<div> 實現不同的塊狀布局效果。
第一個案例是實現網頁的分欄布局。假設我們有一個網頁，需要將內容分為兩欄，左側欄占據寬度的30%，右側欄占據寬度的70%。我們可以使用<div> 來分別定義左側和右側的兩個區域，然后通過設置不同的寬度來實現分欄效果。具體的代碼如下：

<p>\<div style="width: 30%; float: left;">左側欄</div>\<div style="width: 70%; float: right;">右側欄</div>\</p>

在這個案例中，我們先使用<div> 定義了左側欄，設置寬度為30%，然后使用float屬性將其左浮動。接著使用<div> 定義了右側欄，設置寬度為70%，并使用float屬性將其右浮動。這樣就實現了網頁的分欄布局，左側欄占據30%的寬度，右側欄占據70%的寬度。
第二個案例是實現居中布局。有些時候，我們需要將網頁的內容居中顯示，以使頁面看起來更加美觀。使用<div> 可以很方便地實現居中布局。具體的代碼如下：

<p>\<div style="width: 300px; margin: 0 auto;">居中內容</div>\</p>

在這個案例中，我們使用<div> 定義了一個塊狀元素，并設置了寬度為300px。然后通過設置margin屬性為auto，將該元素水平居中。這樣就實現了居中布局，元素的寬度為300px，并水平居中顯示。
第三個案例是實現網頁的排版布局。假設我們有一個網頁，需要將內容按照一定的順序排列，且每個內容塊之間有一定的間距。我們可以使用<div> 來定義每個內容塊，并設置合適的樣式來實現排版效果。具體的代碼如下：

<p>\<div style="margin-bottom: 20px;">內容塊1</div>\<div style="margin-bottom: 20px;">內容塊2</div>\<div style="margin-bottom: 20px;">內容塊3</div>\<div style="margin-bottom: 20px;">內容塊4</div>\</p>

在這個案例中，我們使用<div> 分別定義了四個內容塊，并為每個內容塊設置了margin-bottom屬性為20px。這樣就實現了排版布局，每個內容塊之間的間距為20px。
通過以上的案例，我們可以看到使用<div> 可以非常靈活地實現不同的塊狀布局效果。<div> 塊狀布局是前端開發中非常重要的一部分，掌握好<div> 的使用方法，將會使我們在頁面布局方面更加得心應手。希望本文對大家理解和掌握<div> 塊狀布局有所幫助。