在HTML中，<div>元素是一個容器，用于組合和布局其他HTML元素。它可以將一組相關的元素包裝在一起，并為它們提供一個共同的樣式或功能。可以將<div>看作是一個無意義的容器，它本身并不提供任何特定的語義意義。而在CSS中，<div>可以用來劃分網頁布局，實現各種不同的效果。

下面是幾個使用<div>元素的HTML和CSS代碼案例，詳細說明了它的用法和功能：

1. 使用<div>創建一個網頁的頁眉(header)：

<div class="header">
<h1>這是一個網頁的標題</h1>
<p>這是一個網頁的子標題</p>
</div>

<style>
.header {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
</style>

在這個例子中，通過將網頁的標題和子標題包含在一個<div>元素中，并為<div>元素添加了一個類(header)，可以輕松地對這個網頁的頁眉進行樣式設置。CSS代碼中定義了.header類的樣式，包括背景顏色、內邊距和文本居中。

2. 使用<div>實現響應式布局：

<div class="container">
<div class="sidebar">
<h3>側邊欄</h3>
<ul>
<li>菜單項1</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
</div>
<div class="content">
<h1>主要內容</h1>
<p>這是一些主要內容的文字描述。</p>
</div>
</div>

<style>
.container {
display: flex;
}
.sidebar {
flex: 1;
background-color: #f5f5f5;
padding: 20px;
}
.content {
flex: 2;
padding: 20px;
}
</style>

這個例子展示了如何使用<div>元素和CSS的flex布局來創建一個響應式布局。通過將頁面內容包裹在一個<div>容器內，可以靈活地調整側邊欄和主要內容的寬度比例，從而適應不同屏幕大小的設備。

3. 使用<div>創建一個彈窗效果：

<div class="modal">
<h2>彈窗標題</h2>
<p>這是彈窗的內容。</p>
<button>關閉</button>
</div>

<style>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>

這個例子展示了如何使用<div>元素和CSS的定位屬性來創建一個基本的彈窗效果。通過為<div>元素設置定位屬性，可以將彈窗居中顯示，并通過添加陰影效果和其他樣式，使其更具吸引力。

綜上所述，<div>元素在HTML和CSS中都有廣泛的應用，可以用來創建網頁布局、容器和效果。它的使用非常靈活，可以根據具體需求進行調整和擴展，是編寫現代網頁的重要組成部分。