<div 自動充滿
<div>標(biāo)簽是HTML中最常用的標(biāo)簽之一，用于定義HTML文檔中的一個區(qū)域或一個容器。它能夠自動充滿父元素的寬度，即水平方向上占滿整個父元素的寬度。這意味著<div>元素可以根據(jù)父元素的寬度調(diào)整自己的寬度，無論父元素寬度變化多少，<div>元素都能夠自動適應(yīng)并填充整個寬度。
為了更好地理解<div>自動充滿的特性，下面通過幾個代碼案例來詳細(xì)解釋說明。
例1：<div>充滿整個父元素寬度
假設(shè)有以下HTML代碼：

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

CSS樣式如下：

<p>.container {</p>
<p>width: 500px;</p>
<p>background-color: lightblue;</p>
<p>padding: 20px;</p>
<p>}</p>
<p>.box {</p>
<p>height: 200px;</p>
<p>background-color: lightgreen;</p>
<p>}</p>

在上面的代碼中，有一個父元素<div>標(biāo)記為class="container"，子元素<div>標(biāo)記為class="box"。 在CSS中，設(shè)置.container的寬度為500px，并設(shè)置了背景顏色和內(nèi)邊距。設(shè)置.box的高度為200px，背景顏色為lightgreen。 由于沒有給容器指定寬度，<div>會自動充滿整個父元素的寬度。
例2：使用flexbox充滿整個父元素寬度
假設(shè)有以下HTML代碼：

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

CSS樣式如下：

<p>.container {</p>
<p>width: 500px;</p>
<p>background-color: lightblue;</p>
<p>padding: 20px;</p>
<p>display: flex;</p>
<p>}</p>
<p>.box {</p>
<p>flex: 1;</p>
<p>height: 200px;</p>
<p>background-color: lightgreen;</p>
<p>}</p>

在上面的代碼中，使用了flexbox布局。給.container元素設(shè)置了display: flex，這意味著該容器內(nèi)的所有子元素將按照一行排列，并且自動充滿整個父元素的寬度。 子元素.box通過設(shè)置flex: 1來實現(xiàn)自動充滿父元素的寬度。這里的flex: 1表示子元素.box將根據(jù)剩余的可用空間自動調(diào)整自己的寬度，以填滿整個父元素的寬度。
以上是關(guān)于<div>自動充滿的幾個實例，通過這幾個案例，我們可以清楚地看到<div>如何自動充滿父元素的寬度。無論是通過設(shè)置容器寬度還是使用flexbox布局，<div>元素都能夠根據(jù)父元素的寬度自動調(diào)整自己的寬度，以填充整個寬度。這為我們在設(shè)計頁面布局時提供了更大的靈活性。