div 是 HTML 中的一個重要元素，用于將頁面劃分為不同的區域，并為其提供樣式和布局。在默認情況下，div 元素的寬度是自動調整的，它會盡可能地填滿父元素的寬度。這意味著如果沒有為 div 元素設置具體的寬度，它會自動占據可用的水平空間。在本文中，我們將詳細解釋 div 默認寬度的概念，并通過一些具體的代碼案例來說明。
，讓我們看一個簡單的示例。假設我們有一個包含兩個 div 元素的父容器：

HTML 代碼如下：

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

CSS 代碼如下：

.container {
background-color: lightgray;
padding: 10px;
}
<br>
.box {
background-color: gray;
height: 50px;
}

在這個示例中，父容器（container）的背景顏色為淺灰色，內邊距為 10 像素。子元素（box）的背景顏色為灰色，高度為 50 像素。我們并沒有為子元素設置具體的寬度，讓它們采用默認的寬度。此時，兩個子元素將會自動填滿父容器的寬度，兩者之間不會有空隙。
接下來，我們看一個稍微復雜一點的案例。在這個例子中，我們將使用 flexbox 布局來控制兩個 div 元素的寬度。假設我們需要一個左側的導航欄和一個右側的內容區域，它們的寬度比例為 1:3。

HTML 代碼如下：

<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>

CSS 代碼如下：

.container {
display: flex;
background-color: lightgray;
padding: 10px;
}
<br>
.sidebar {
background-color: gray;
flex: 1;
}
<br>
.content {
background-color: darkgray;
flex: 3;
}

在這個示例中，我們將父容器的 display 屬性設置為 flex，這將啟用 flexbox 布局。使用 flex 屬性，我們將 sidebar 的寬度設置為 1，而 content 的寬度設置為 3。這樣，左側的導航欄寬度將占據總寬度的 1/4，右側的內容區域寬度將占據總寬度的 3/4。
除了上述示例之外，還有一些其他的實際案例可以說明 div 默認寬度的概念。例如，當我們使用百分比作為寬度單位時，div 元素的寬度將相對于其父容器的寬度進行計算。另外，如果父容器的寬度是固定的，那么 div 元素的寬度也將是固定的。
一下，div 元素的默認寬度是自動調整的，會占據父容器的可用寬度。我們可以通過設置具體的寬度，使用 flexbox 布局或百分比來改變 div 元素的寬度。這使得我們能夠更好地控制頁面的布局和樣式。通過以上的示例和解釋，我們希望讀者能夠更好地理解 div 默認寬度的概念，并且能夠在實際開發中靈活運用。