<div>是CSS中的一個重要標簽，用于定義HTML文檔中的容器塊。它的作用是將HTML元素劃分為一個獨立的區域，可以對其進行樣式設計和布局。通過使用<div>，我們可以更好地組織頁面結構并實現更靈活的排版效果。下面將通過幾個代碼案例來詳細解釋<div>的使用。
第一個案例是使用<div>實現頁面布局。我們可以通過給<div>定義樣式屬性來控制其在頁面上的位置和尺寸。例如，下面的代碼展示了一個簡單的布局結構，其中包含一個具有不同顏色背景的<div>：
在上面的代碼中，<div>標簽被賦予了一個類名為.container的CSS樣式。該樣式定義了<div>的寬度、高度、背景顏色和內邊距。通過這些樣式設置，我們可以將<div>限定在特定的尺寸范圍內，并且為其添加背景顏色和內邊距，從而實現頁面布局效果。
第二個案例是使用<div>實現頁面的層疊效果。在CSS中，可以通過設置<div>的position屬性為absolute或fixed來控制其在頁面上的位置。同時還可以通過設置<div>的z-index屬性來控制其在層疊上下文中的堆疊順序。下面的代碼演示了一個層疊效果的例子：
在上述代碼中，我們定義了兩個<div>，分別具有不同的背景顏色和位置。通過設置position屬性為absolute和設置top、left屬性值，我們可以控制這兩個<div>在頁面上的位置。而通過設置z-index屬性不同的值，我們可以控制這兩個<div>的層疊順序。在本例中，<div class="layer2">會覆蓋在<div class="layer1">之上，因為它的z-index值更大。
<div>在CSS中扮演著重要的角色，不僅可以幫助我們實現頁面布局和層疊效果，還可以用于其他更多的用途。通過合理的運用<div>，我們可以實現豐富多樣的網頁設計和交互效果。希望本文的示例能夠幫助讀者更好地理解和運用<div>標簽。
第一個案例是使用<div>實現頁面布局。我們可以通過給<div>定義樣式屬性來控制其在頁面上的位置和尺寸。例如，下面的代碼展示了一個簡單的布局結構，其中包含一個具有不同顏色背景的<div>：
<p>代碼：</p>
<pre>
\<pre>html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
height: 300px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>這是一個<div>示例</h1>
<p>這是一個使用<div>進行頁面布局的示例。</p>
</div>
</body>
</html>
\在上面的代碼中，<div>標簽被賦予了一個類名為.container的CSS樣式。該樣式定義了<div>的寬度、高度、背景顏色和內邊距。通過這些樣式設置，我們可以將<div>限定在特定的尺寸范圍內，并且為其添加背景顏色和內邊距，從而實現頁面布局效果。
第二個案例是使用<div>實現頁面的層疊效果。在CSS中，可以通過設置<div>的position屬性為absolute或fixed來控制其在頁面上的位置。同時還可以通過設置<div>的z-index屬性來控制其在層疊上下文中的堆疊順序。下面的代碼演示了一個層疊效果的例子：
<p>代碼：</p>
<pre>
\<pre>html
<!DOCTYPE html>
<html>
<head>
<style>
.layer1 {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #ff0000;
z-index: 1;
}
<br>
.layer2 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: #00ff00;
z-index: 2;
}
</style>
</head>
<body>
<div class="layer1"></div>
<div class="layer2"></div>
</body>
</html>
\在上述代碼中，我們定義了兩個<div>，分別具有不同的背景顏色和位置。通過設置position屬性為absolute和設置top、left屬性值，我們可以控制這兩個<div>在頁面上的位置。而通過設置z-index屬性不同的值，我們可以控制這兩個<div>的層疊順序。在本例中，<div class="layer2">會覆蓋在<div class="layer1">之上，因為它的z-index值更大。
<div>在CSS中扮演著重要的角色，不僅可以幫助我們實現頁面布局和層疊效果，還可以用于其他更多的用途。通過合理的運用<div>，我們可以實現豐富多樣的網頁設計和交互效果。希望本文的示例能夠幫助讀者更好地理解和運用<div>標簽。