<div>是HTML中的一個重要標簽，它可以被用來創建一個獨立的容器，用來顯示其他HTML元素。在實際的開發中，我們經常會需要把多個元素進行組合，并對它們進行布局和樣式設置。在這種情況下，<div>標簽就會派上用場。
<div>標簽可以通過添加class屬性或id屬性來進行樣式設置和JavaScript交互。其中，class屬性可以添加多個樣式類名，每個類名之間用空格分隔。而id屬性則是唯一的，用來標識一個特定的元素。
下面我們來看幾個使用<div>標簽的案例：
案例1：使用<div>進行布局

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: lightblue;
}
</style>
<div class="container">
<p>Hello, Div!</p>
</div>

上面的代碼演示了如何使用<div>和CSS的flex布局來進行居中布局。container類包裹在<div>標簽中，通過設置display屬性為flex，實現了內部元素的居中顯示。這里的

標簽是<div>的子元素，用來展示文本內容。

案例2：使用<div>進行樣式設置

<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: lightgray;
}
</style>
<div class="box">
<h2>Title</h2>
<p>Content here...</p>
</div>

在上面的代碼中，我們創建了一個名為"box"的類，用來設置<div>元素的樣式。它的寬度和高度分別為200px，并且有一個邊框和背景顏色。此外，在<div>標簽中，我們還添加了一個

標簽和一個

標簽來顯示標題和內容。

案例3：使用多個<div>進行嵌套

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: lightblue;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightgray;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

上面的代碼展示了如何使用多個<div>標簽進行嵌套。通過設置display屬性為flex，.container類實現了一行中的三個.box元素水平居中顯示。每個.box元素都有相同的寬度、高度、邊框樣式和背景顏色。

通過上述案例的介紹，相信你已經對<div>的使用有了更加深入的了解。它是一個非常有用的HTML標簽，能夠幫助我們更好地進行布局和樣式設置。在實際的開發過程中，我們可以根據需要靈活運用<div>標簽，讓頁面的結構更加清晰、有序，同時也提高了代碼的可讀性和維護性。