，我們來介紹block屬性。當我們將一個<div>元素的display屬性設置為block時，它將以塊級元素的形式顯示。塊級元素會獨占一行，并且默認情況下寬度會充滿父容器。我們可以通過下面的代碼案例來具體了解：
<div style="display: block; background-color: coral; width: 200px; height: 100px;"> 這是一個塊級元素的例子 </div>
上面的代碼中，我們設置了一個寬度為200px、高度為100px，并且背景顏色為珊瑚紅的<div>元素。由于display屬性被設置為block，這個元素會獨占一行，并且寬度會自動充滿父容器。
接下來，我們來介紹inline屬性。當將一個<div>元素的display屬性設置為inline時，它將以行內元素的形式顯示。行內元素并不會獨占一行，而是像文字一樣按順序排列。我們可以通過下面的代碼案例來具體了解：
<div style="display: inline; background-color: lightblue;"> 這是一個行內元素的例子 </div> <div style="display: inline; background-color: lightgreen;"> 這是另一個行內元素的例子 </div>
上面的代碼中，我們設置了兩個以行內元素顯示的<div>元素，它們分別具有不同的背景顏色。由于display屬性被設置為inline，這兩個元素會像文字一樣排在同一行，并且不會自動換行。
接下來，我們來介紹inline-block屬性。當將一個<div>元素的display屬性設置為inline-block時，它將以行內塊級元素的形式顯示。行內塊級元素會像行內元素一樣按順序排列，但是可以設置寬高和其他塊級元素的樣式。我們可以通過下面的代碼案例來具體了解：
<div style="display: inline-block; background-color: lightpink; width: 150px; height: 100px;"> 這是一個行內塊級元素的例子 </div> <div style="display: inline-block; background-color: lightyellow; width: 200px; height: 100px;"> 這是另一個行內塊級元素的例子 </div>
上面的代碼中，我們設置了兩個以行內塊級元素顯示的<div>元素，它們分別具有不同的背景顏色、寬度和高度。由于display屬性被設置為inline-block，這兩個元素會像行內元素一樣排在同一行，并且可以設置寬高和其他塊級元素的樣式。
最后，我們來介紹none屬性。當將一個<div>元素的display屬性設置為none時，它將完全隱藏起來，不顯示在頁面上。我們可以通過下面的代碼案例來具體了解：
<button onclick="toggleDisplay()">點擊切換顯示</button>
<div id="hidden-div" style="display: none; background-color: mediumpurple; width: 200px; height: 100px;">
這個<div>元素初始時是隱藏的
</div>
<br>
<script>
function toggleDisplay() {
var hiddenDiv = document.getElementById("hidden-div");
if (hiddenDiv.style.display === "none") {
hiddenDiv.style.display = "block";
} else {
hiddenDiv.style.display = "none";
}
}
</script>上面的代碼中，我們設置了一個初始時display屬性為none的<div>元素，并通過JavaScript編寫了一個點擊按鈕來切換它的顯示狀態。當點擊按鈕時，隱藏的<div>元素將會顯示出來，再次點擊則會隱藏起來。
綜上所述，我們可以通過display屬性來控制<div>元素的顯示方式，包括block、inline、inline-block以及none。這些屬性的靈活組合可以幫助我們實現豐富多樣的頁面布局效果。