<div>元素是HTML中的一個常用標簽，它可以用來創建一個獨立的節，將頁面劃分為不同的區塊。不僅如此，<div>元素還可以用來添加樣式、布局和操作元素。下面將通過幾個代碼案例詳細解釋如何使用<div>元素。
第一個案例是使用<div>元素創建一個簡單的頁面布局。在HTML中，可以通過給<div>元素添加class或id屬性來為其添加樣式。例如，以下代碼會創建一個包含標題和內容的頁面布局：

<style>
.container {
width: 500px;
margin: 0 auto;
}
<br>
    .title {
font-size: 24px;
font-weight: bold;
}
<br>
    .content {
font-size: 18px;
}
</style>
<br>
<div class="container">
<div class="title">這是標題</div>
<div class="content">這是內容</div>
</div>

在上述代碼中，通過創建一個名為"container"的class來定義外層<div>元素的樣式。這個class設置了容器的寬度為500像素，并將其水平居中。同時，為內層的<div>元素創建了名為"title"和"content"的class，分別定義了標題和內容的樣式。這樣，頁面會呈現出一個寬度為500像素的容器，其中包含一個標題和相應的內容。
第二個案例是使用<div>元素創建一個響應式布局。在實際開發中，經常需要根據不同的設備分別設置布局樣式。下面的代碼演示了如何使用<div>元素和媒體查詢來實現響應式布局：

<style>
.container {
display: flex;
flex-wrap: wrap;
}
<br>
    .box {
width: 200px;
height: 200px;
margin: 10px;
background-color: gray;
}
<br>
    @media (max-width: 768px) {
.box {
width: 100px;
height: 100px;
}
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上述代碼中，通過給外層<div>元素添加class為"container"，將其內部的子<div>元素排成一行。而內層的<div>元素添加class為"box"，用來表示一個具體的內容區塊。通過設置子<div>元素的寬度、高度、外邊距和背景色，可以創建一個簡單的盒子布局。
另外，在代碼的底部使用了媒體查詢(@media)來判斷屏幕的寬度是否小于等于768像素。當滿足這個條件時，媒體查詢內部的樣式將生效，將<div>元素的寬度和高度設置為100像素。這樣，在較小的屏幕上，頁面會呈現出具有適應性布局的效果。
以上只是<div>元素的兩個簡單使用案例，實際應用中，可以根據需求靈活運用<div>元素的屬性和樣式，實現豐富多樣的頁面效果。希望這篇文章對您理解<div>元素的添加方法有所幫助。