<div>標簽是HTML中的一個常用元素，用于定義文檔中的一個區域或部分。我們可以使用CSS來控制這個區域的顯示方式，比如使用"display"屬性來設置元素的顯示方式。display屬性有許多不同的屬性值，可以用來改變元素的顯示方式，包括塊級元素、內聯元素和彈性元素等。
下面是幾個使用"display"屬性的代碼案例，詳細解釋顯示方式的變化：
第一個案例：

<p>HTML代碼：</p>
<pre>
<div id="block">
<p>這是一個塊級元素的示例</p>
</div>

CSS代碼：

#block {
display: block;
width: 200px;
height: 100px;
background-color: lightblue;
}

解釋：

在這個案例中，我們給<div>標簽添加了"display: block"的CSS樣式。這意味著<div>元素會獨占一行，并且可以設置寬度、高度等屬性。在這個案例中，<div>元素的寬度是200px，高度是100px，并設置了背景顏色為淺藍色。

第二個案例：

<p>HTML代碼：</p>
<pre>
<div id="inline">
<p>這是一個內聯元素的示例</p>
</div>

CSS代碼：

#inline {
display: inline;
background-color: lightgreen;
padding: 5px;
}

解釋：

在這個案例中，我們給<div>標簽添加了"display: inline"的CSS樣式。這意味著<div>元素會與其他元素在同一行顯示，并且不能設置寬度、高度等屬性。在這個案例中，<div>元素的背景顏色是淺綠色，并設置了內邊距為5px。

第三個案例：

<p>HTML代碼：</p>
<pre>
<div id="flex">
<p>這是一個彈性元素的示例</p>
</div>

CSS代碼：

#flex {
display: flex;
flex-direction: column;
align-items: center;
}

解釋：

在這個案例中，我們給<div>標簽添加了"display: flex"的CSS樣式。這意味著<div>元素會成為一個彈性容器，可以自由選擇子元素的排列方式和對齊方式。在這個案例中，我們通過"flex-direction: column"來設置子元素的排列方式為垂直排列，通過"align-items: center"來設置子元素在水平方向上的居中對齊。

通過以上幾個案例，我們可以看到"display"屬性對元素的顯示方式產生了不同的效果。通過設置不同的"display"屬性值，我們可以靈活控制元素的布局和顯示方式，使得頁面的設計更加豐富多樣。這些案例只是簡單的示例，實際應用中還可以結合其他屬性和值來實現更復雜的布局效果。所以，在使用<div>標簽時，加入"display"屬性可以讓我們更好地掌控元素的顯示方式。