<div>是HTML中用來定義文檔中某個區塊的標簽，它可以用來劃分頁面中的不同部分，并為這些部分添加樣式。在網頁設計中，<div>被廣泛應用于頁面的布局，通過組合和排列多個<div>元素，可以實現各種多樣的頁面布局效果。下面將通過幾個代碼案例來詳細說明<div>的排版技巧。
案例一：水平排列 <div>的一個主要用途是水平排列元素。通過設置<div>的樣式為display: inline-block，可以使多個<div>元素橫向排列，實現水平布局的效果。例如，以下代碼會將三個<div>元素橫向排列在一起：

\<pre>html
<p><div style="display: inline-block; width: 100px; height: 100px; background-color: red;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: green;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: blue;"></div></p>
\

案例二：垂直排列 除了水平排列，<div>還可以用來垂直排列元素。通過設置<div>的樣式為display: block，可以使多個<div>元素垂直排列，實現豎直布局的效果。例如，以下代碼會將三個<div>元素垂直排列在一起：

\<pre>html
<p><div style="display: block; width: 100px; height: 100px; background-color: red;"></div></p>
<p><div style="display: block; width: 100px; height: 100px; background-color: green;"></div></p>
<p><div style="display: block; width: 100px; height: 100px; background-color: blue;"></div></p>
\

案例三：居中對齊 通過設置<div>的樣式為margin: 0 auto，可以使<div>元素相對于其父級元素水平居中對齊。例如，以下代碼會將一個<div>元素居中對齊在頁面中：

\<pre>html
<p><div style="width: 200px; height: 200px; margin: 0 auto; background-color: red;"></div></p>
\

案例四：網格布局 <div>還可以用來創建網格布局。通過設置<div>元素的樣式為display: grid，并使用grid-template-columns和grid-template-rows屬性定義網格的列和行。例如，以下代碼會創建一個包含4個<div>元素的2x2網格布局：

\<pre>html
<p><div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;">
<div style="background-color: red;"></div>
<div style="background-color: green;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: yellow;"></div>
</div></p>
\

通過以上幾個代碼案例，我們可以看到<div>是一個非常靈活和多功能的標簽，在網頁布局中有著重要的作用。通過合理地使用<div>以及CSS樣式，我們可以實現各種各樣的頁面布局效果，使網頁更加美觀和易于閱讀。因此，掌握<div>的排版技巧對于網頁設計者來說是非常重要的。