<div>是HTML中的一個標簽，用于定義文檔中的一個獨立塊區域。它可以用來組合其他HTML元素，以創建不同的布局和結構。在CSS中，<div>標簽經常用作容器，用于將相關的元素分組并應用樣式。以下是一些關于<div>標簽的使用案例。
第一個案例是一個簡單的<div>標簽的應用。在這個案例中，我們使用<div>來創建一個居中的文本塊。

<style>
.center {
text-align: center;
background-color: lightgray;
padding: 20px;
}
</style>
<br>
<div class="center">
<p>這是一個居中的文本塊</p>
</div>

在上面的代碼中，我們定義了一個CSS樣式類.center，并將該類應用到<div>標簽上。這個類設置了文本水平居中、背景顏色為lightgray和內邊距為20像素。然后，我們在<div>標簽內插入一個

標簽，其中包含了文本內容。這樣，我們就創建了一個居中的文本塊。
另一個案例是使用<div>標簽創建一個網格布局。在這個案例中，我們將使用CSS網格布局來實現。

<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
}
</style>
<br>
<div class="grid">
<div class="grid-item">項目1</div>
<div class="grid-item">項目2</div>
<div class="grid-item">項目3</div>
<div class="grid-item">項目4</div>
<div class="grid-item">項目5</div>
<div class="grid-item">項目6</div>
</div>

在上面的代碼中，我們定義了一個CSS樣式類.grid，并將其應用到<div>標簽上。這個類使用網格布局顯示其子元素。我們通過grid-template-columns屬性指定了每列的寬度，并使用repeat()函數來重復定義列的數量。grid-gap屬性定義了網格項之間的間隔。然后，我們定義了一個名為.grid-item的CSS樣式類，并將其應用到內部的<div>標簽上。這個類設置了網格項的背景顏色為lightblue和內邊距為20像素。在<div class="grid">標簽內，我們插入了六個<div class="grid-item">標簽，每個標簽表示一個網格項。這樣，我們就創建了一個簡單的網格布局。
最后一個案例是使用<div>標簽的嵌套來創建一個復雜的頁面布局。

<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.left {
width: 30%;
background-color: lightblue;
padding: 20px;
}
.right {
flex-grow: 1;
background-color: lightgray;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="left">
<p>左側內容</p>
</div>
<div class="right">
<p>右側內容</p>
</div>
</div>

在上面的代碼中，我們定義了一個CSS樣式類.container，并將其應用到<div>標簽上。這個類使用flexbox布局來排列其子元素。justify-content屬性設置了子元素的水平對齊方式，align-items屬性設置了子元素的垂直對齊方式。然后，我們定義了兩個CSS樣式類.left和.right，并將其分別應用到<div>標簽內部的元素上。這兩個類分別設置了左側和右側區域的樣式。在<div class="container">標簽內，我們嵌套了兩個<div>標簽，分別表示左側和右側內容區域。這樣，我們就創建了一個復雜的頁面布局。
起來，<div>標簽可以用于定義HTML文檔中的獨立塊區域，并通過CSS樣式和嵌套來實現不同的布局和結構。以上給出了幾個<div>標簽的使用案例，包括居中文本塊、網格布局和復雜頁面布局。這些案例展示了<div>標簽在創建多樣化布局方面的靈活性和實用性。