div 是 HTML 中的一個重要元素，用于將頁面劃分為不同的區(qū)域，并為其提供樣式和布局。在默認(rèn)情況下，div 元素的寬度是自動調(diào)整的，它會盡可能地填滿父元素的寬度。這意味著如果沒有為 div 元素設(shè)置具體的寬度，它會自動占據(jù)可用的水平空間。在本文中，我們將詳細(xì)解釋 div 默認(rèn)寬度的概念，并通過一些具體的代碼案例來說明。
，讓我們看一個簡單的示例。假設(shè)我們有一個包含兩個 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）的背景顏色為淺灰色，內(nèi)邊距為 10 像素。子元素（box）的背景顏色為灰色，高度為 50 像素。我們并沒有為子元素設(shè)置具體的寬度，讓它們采用默認(rèn)的寬度。此時(shí)，兩個子元素將會自動填滿父容器的寬度，兩者之間不會有空隙。
接下來，我們看一個稍微復(fù)雜一點(diǎn)的案例。在這個例子中，我們將使用 flexbox 布局來控制兩個 div 元素的寬度。假設(shè)我們需要一個左側(cè)的導(dǎo)航欄和一個右側(cè)的內(nèi)容區(qū)域，它們的寬度比例為 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 屬性設(shè)置為 flex，這將啟用 flexbox 布局。使用 flex 屬性，我們將 sidebar 的寬度設(shè)置為 1，而 content 的寬度設(shè)置為 3。這樣，左側(cè)的導(dǎo)航欄寬度將占據(jù)總寬度的 1/4，右側(cè)的內(nèi)容區(qū)域?qū)挾葘⒄紦?jù)總寬度的 3/4。
除了上述示例之外，還有一些其他的實(shí)際案例可以說明 div 默認(rèn)寬度的概念。例如，當(dāng)我們使用百分比作為寬度單位時(shí)，div 元素的寬度將相對于其父容器的寬度進(jìn)行計(jì)算。另外，如果父容器的寬度是固定的，那么 div 元素的寬度也將是固定的。
一下，div 元素的默認(rèn)寬度是自動調(diào)整的，會占據(jù)父容器的可用寬度。我們可以通過設(shè)置具體的寬度，使用 flexbox 布局或百分比來改變 div 元素的寬度。這使得我們能夠更好地控制頁面的布局和樣式。通過以上的示例和解釋，我們希望讀者能夠更好地理解 div 默認(rèn)寬度的概念，并且能夠在實(shí)際開發(fā)中靈活運(yùn)用。