div 是 HTML 中的一個重要元素，用于將網頁內容劃分為獨立的塊。而 div 元素有一個重要的特性，就是其寬度默認是自動調整的。也就是說，div 元素的寬度會隨內容的多少自適應調整，不需要手動設置寬度。在本文中，我們將詳細解釋 div 自動寬度的相關特性，并通過幾個代碼案例來說明其具體的應用。
代碼案例1：

html
<p>一個簡單的 div 元素：</p>
<pre>
<div>這是一個 div 元素</div>

這個代碼案例中，div 元素沒有設置任何寬度樣式，而是直接包裹了一段文本內容。此時，div 元素會根據內容的寬度自動調整它自己的寬度，確保內容能夠完全顯示。

代碼案例2：html

設置 div 元素的寬度為固定值：

<div style="width: 300px;">這是一個固定寬度的 div 元素</div>

在這個代碼案例中，我們手動設置了 div 元素的寬度為 300 像素。無論 div 元素內部的內容是多少，它的寬度都會固定在 300 像素。這種方式適用于需要固定寬度的布局場景。

代碼案例3：

html
<p>設置 div 元素的最大寬度：</p>
<pre>
<div style="max-width: 500px;">這是一個最大寬度為 500px 的 div 元素</div>

在這個案例中，我們設置了 div 元素的最大寬度為 500 像素。如果內容的寬度小于 500 像素，div 元素的寬度就會和內容寬度一致；如果內容的寬度超過了 500 像素，div 元素的寬度就會自動調整為 500 像素，確保內容不會超出指定的最大寬度。

代碼案例4：html

div 元素自動占滿父元素的剩余寬度：

<div style="width: 100%; background-color: #f1f1f1;">
<div style="width: 50%; float: left; background-color: #e1e1e1;">左側內容</div>
<div style="float: left; background-color: #c1c1c1;">右側內容</div>
</div>

在這個示例中，我們設置了一個父級 div 元素，并給它設置了 100% 的寬度。在父級 div 元素內部，我們定義了兩個子 div 元素，分別是左側內容和右側內容。左側內容的寬度被設置為 50%，右側內容則沒有設置寬度。沒有設置寬度的 div 元素會自動占滿父元素剩余的寬度，這樣就實現了左右兩欄的布局。

綜上所述，div 元素具有自動寬度的特性，能夠根據包裹的內容自適應調整寬度。除非手動設置固定寬度，否則 div 元素的寬度會自動適應內容。通過靈活運用 div 元素的自動寬度特性，我們可以實現各種不同的頁面布局。