<div>是HTML中的一個標簽，用于創建一個容器，可以在其中放置其他HTML元素。除了用于布局，<div>也可以用于實現拉伸效果。 拉伸是指在HTML中調整元素的大小，使其在瀏覽器窗口大小發生改變時可以自動適應。通過設置CSS屬性，我們可以使用<div>標簽實現拉伸效果。
下面是幾個案例，用于詳細說明如何使用<div>實現拉伸效果：
案例一： 假設我們有一個<div>容器，我們想要在瀏覽器窗口大小改變時，使其自動適應并向四個方向拉伸。我們可以使用CSS中的屬性來實現這個效果：

<p>css代碼：</p>
<pre>
<div style="resize: both; overflow: auto;">
<!-- 在這里放置你的內容 -->
</div>

在這個案例中，我們設置了<div>的CSS屬性resize為both，這意味著元素可以被水平和垂直方向上拉伸。overflow屬性設置為auto，表示當內容超出容器大小時，出現滾動條。這樣，在窗口大小改變時，<div>將自動適應并拉伸到合適的大小。
案例二： 假設我們有一個<div>容器，我們想要在瀏覽器窗口水平方向拉伸時，使其自動適應。我們可以使用CSS中的屬性來實現這個效果：

<p>css代碼：</p>
<pre>
<div style="width: 100%; height: 200px;">
<!-- 在這里放置你的內容 -->
</div>

在這個案例中，我們設置了<div>的CSS屬性width為100%，這意味著元素的寬度將自動適應父容器的寬度。height屬性設置為200px，表示元素的高度固定為200像素。這樣，在窗口大小改變時，<div>將根據父容器的寬度自動拉伸。
案例三： 假設我們有一個<div>容器，我們想要在瀏覽器窗口高度改變時，使其自動適應。我們可以使用CSS中的屬性來實現這個效果：

<p>css代碼：</p>
<pre>
<div style="width: 300px; height: 100%;">
<!-- 在這里放置你的內容 -->
</div>

在這個案例中，我們設置了<div>的CSS屬性width為300px，表示元素的寬度固定為300像素。height屬性設置為100%，這意味著元素的高度將自動適應父容器的高度。這樣，在窗口大小改變時，<div>將根據父容器的高度自動拉伸。
綜上所述，通過設置<div>的CSS屬性，我們可以很容易實現拉伸效果。這個功能在響應式網頁設計中非常有用，使得網頁在不同窗口大小下都能夠正確顯示和布局。無論是在全屏顯示還是在小屏幕上瀏覽，使用<div>實現拉伸效果可以使網頁更加優雅和友好。