<div> 是 HTML 中的一個重要標簽，它用于創建一個容器，用于組織和分組頁面中的元素。默認情況下，<div> 元素是不顯示的，而是作為一個占位符存在的。然而，我們可以通過使用 CSS（層疊樣式表）樣式來改變 <div> 元素的顯示方式。在本文中，我們將探討如何使用 CSS 來使 <div> 元素自動顯示。
當瀏覽器渲染 HTML 頁面時，默認情況下，<div> 元素是塊級元素，它會占據一行的全部寬度，并且會自動換行。要使 <div> 元素自動顯示，我們可以使用 CSS 的 display 屬性。這個屬性可以控制元素在頁面上的顯示方式。
在下面的示例中，我們將演示三種常見的使用 CSS 讓 <div> 元素自動顯示的方法：使用 display: block，display: inline 和 display: inline-block。
方法一：使用 display: block 通過將 display 屬性設置為 block，<div> 元素將以塊級元素的方式顯示，占據整個行的寬度，并且會自動換行。

<p>示例1：</p>
<pre>
<style>
.block {
display: block;
width: 200px;
background-color: pink;
text-align: center;
padding: 20px;
}
</style>
<div class="block">這是一個塊級元素。</div>

方法二：使用 display: inline 通過將 display 屬性設置為 inline，<div> 元素將以行內元素的方式顯示，不會占據整個行的寬度，而是根據其內容的長度自動適應大小，不會自動換行。

<p>示例2：</p>
<pre>
<style>
.inline {
display: inline;
background-color: lightblue;
padding: 10px;
}
</style>
<div class="inline">這是一個行內元素。</div>
<div class="inline">這是另一個行內元素。</div>

方法三：使用 display: inline-block 通過將 display 屬性設置為 inline-block，<div> 元素將以行內塊級元素的方式顯示，不會占據整個行的寬度，但是可以設置寬度和高度，并且會根據設置的寬度自動換行。

<p>示例3：</p>
<pre>
<style>
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>

通過上述的代碼案例，我們可以看到不同的 display 屬性是如何影響 <div> 元素的顯示方式的。這些方法可以根據實際的需求來選擇使用。例如，如果我們需要讓一行中的多個元素一起換行，可以使用 display: inline-block；如果我們需要讓一個元素獨占一行并且自動換行，可以使用 display: block。
在實際的網頁設計中，我們可以將這些方法應用到不同的布局需求中，使頁面展示更靈活、美觀。