<div> 標簽是 HTML 中的一個重要元素，用于創建分塊的結構。在 CSS 中，我們可以使用 <div> 標簽來定義一個容器，然后使用 CSS 樣式來控制這個容器的外觀和行為。
<div> 標簽可以看作是一個空的容器，它沒有自己的樣式和特性，完全由 CSS 來定義。通過給 <div> 添加類名或 ID 屬性，我們可以為它們設置不同的樣式，并通過 CSS 選擇器來選擇和操作這些 <div> 元素。
下面通過幾個代碼案例來詳細說明 <div> 標簽在 CSS 模塊中的用法和作用。
例子一： 代碼如下：

<div class="container">
<h1>這是一個標題</h1>
<p>這是一個段落</p>
</div>
<br>
<style>
.container {
border: 1px solid black;
padding: 10px;
background-color: lightgray;
}
</style>

在這個例子中，我們使用 <div class="container"> 來定義一個容器，并為它添加了一個類名為 "container"。然后，我們使用 CSS 樣式來設置這個容器的邊框、內邊距和背景顏色。通過這些樣式，我們可以讓容器具備一定的裝飾效果。
例子二： 代碼如下：

<div id="sidebar">
<ul>
<li>菜單項 1</li>
<li>菜單項 2</li>
<li>菜單項 3</li>
</ul>
</div>
<br>
<style>
#sidebar {
width: 200px;
background-color: lightblue;
}
#sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#sidebar li {
padding: 5px;
border-bottom: 1px solid white;
}
</style>

這個例子中，我們使用 <div id="sidebar"> 來定義一個具有特定 ID 的容器，并為它設置了寬度和背景顏色。然后，我們使用 CSS 樣式來設置容器內部的無序列表（<ul>），以及列表項（<li>）的樣式，例如設置內邊距和邊框。
例子三： 代碼如下：

<div class="image-container">
<img src="image.jpg" alt="圖片">
<p>這是一段圖片描述</p>
</div>
<br>
<style>
.image-container {
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
}
.image-container p {
font-size: 14px;
color: gray;
}
</style>

在這個例子中，我們使用 <div class="image-container"> 來定義一個容器，并在容器內部放置了一張圖片和一段描述文字。然后，我們使用 CSS 樣式來設置容器的文本對齊方式、圖片的最大寬度和自適應高度，以及描述文字的字體大小和顏色。
通過這些例子，我們可以看到 <div> 標簽在 CSS 模塊中的作用。它可以用來創建各種不同樣式的容器，用來組織和布局網頁中的內容，并通過 CSS 來控制容器的外觀和行為。