<div>元素是HTML中的一個標簽，用來創建一個可視化的塊級元素。在網頁中，我們可以使用<div>元素創建一個容器，然后在容器內部放置其他元素，例如文本、圖像、表格等。如何正確地顯示一個<div>元素非常重要，因為它能影響到頁面的布局和樣式。接下來，我們將通過幾個代碼案例來詳細解釋<div>的顯示方式。
第一個案例中，我們將展示一個基本的<div>元素，將其顯示為一個矩形框，并設置背景顏色和邊框樣式。下面是示例代碼：

<p>下面是一個基本的<div>元素的示例：</p>
<pre>
<style>
.container {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid black;
}
</style>
<div class="container"></div>

在上述代碼中，我們使用了CSS來定義一個名為.container的類，它具有固定的寬度和高度，并設置了背景顏色和邊框樣式。然后，我們在<div>標簽中應用了這個類，將其顯示為一個矩形框。
第二個案例中，我們將展示如何使用CSS的浮動屬性來布局<div>元素，實現多個元素的橫向并排顯示。下面是示例代碼：

下面是一個使用浮動屬性布局的<div>元素的示例：

<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}
.box {
width: 50px;
height: 50px;
background-color: lightgray;
margin: 10px;
float: left;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上述代碼中，我們定義了一個名為.container的類，它具有固定的寬度和高度，并設置了邊框樣式和溢出隱藏屬性。然后，我們定義了一個名為.box的類，它具有寬度、高度、背景顏色和外邊距樣式。使用浮動屬性將.box類的元素橫向并排顯示在.container類的容器中。
第三個案例中，我們將展示如何使用CSS的Flex布局來實現<div>元素的自適應布局。下面是示例代碼：
`

下面是一個使用Flex布局的<div>元素的示例：

<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.box {
width: 50px;
height: 50px;
background-color: lightgray;
margin: 10px;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上述代碼中，我們將.container類的元素的顯示方式設置為Flex布局，并指定了水平方向的排列方式、對齊方式等樣式。然后，我們使用.box類定義了子元素的樣式，設置了寬度、高度、背景顏色和外邊距樣式。通過Flex布局，我們可以實現<div>元素的自適應布局。
通過以上三個案例，我們詳細解釋了<div>元素的顯示方式。在實際開發過程中，我們可以根據具體的需求和設計要求，靈活使用CSS的屬性和布局技巧，來控制<div>元素的顯示效果。通過合理地定義樣式和布局，我們可以創建出美觀、易于閱讀和使用的網頁界面。