<div>是HTML中最常用的元素之一，它可以用來定義HTML文檔中的一個區域，它可以包含其他HTML元素，并且可以通過CSS樣式來進行布局和樣式化。在CSS中，我們可以通過一些技巧來實現<div>元素的伸縮效果，使其能夠根據內容的大小自動調整其寬度或高度。本文將通過幾個代碼案例來詳細解釋和說明如何使用CSS實現<div>的伸縮功能。
第一個案例是實現一個水平伸縮的<div>元素。在HTML中，我們可以用一個<div>元素包裹一些文本內容，然后使用CSS樣式來設置其寬度。在這個案例中，我們希望<div>元素的寬度能夠根據其中文本內容的大小進行自動調整。為了實現這個效果，我們可以使用CSS中的"inline-block"屬性并結合"white-space: nowrap"屬性，代碼如下：

<style>
.flexible-div {
display: inline-block;
white-space: nowrap;
background-color: lightblue;
padding: 10px;
}
</style>
<br>
<div class="flexible-div">
這是一段文本內容，我們希望這個div元素的寬度能自動調整。
</div>

在這個案例中，我們使用了display: inline-block屬性來將<div>元素變成一個行內塊級元素，這樣它就能夠根據內容的大小進行自動調整寬度。同時，我們設置white-space: nowrap屬性來防止文本換行，保證文本內容在一行顯示。另外，我們還設置了背景色和內邊距，以便更好地展示<div>元素的伸縮效果。
第二個案例是實現一個垂直伸縮的<div>元素。在HTML中，我們可以用一個<div>元素包裹一些文本內容，并設置其高度。在這個案例中，我們希望<div>元素的高度能夠根據其中文本內容的大小進行自動調整。為了實現這個效果，我們可以使用CSS中的"display: flex"屬性并結合"align-items: center"屬性，代碼如下：

<style>
.flexible-div {
display: flex;
align-items: center;
background-color: lightblue;
padding: 10px;
}
</style>
<br>
<div class="flexible-div">
這是一段文本內容，我們希望這個div元素的高度能自動調整。
</div>

在這個案例中，我們使用了display: flex屬性將<div>元素變成一個容器，并使用align-items: center屬性來使文本內容垂直居中。這樣，<div>元素的高度就能根據文本內容的大小進行自動調整。同樣，我們也設置了背景色和內邊距來更好地展示伸縮效果。
通過以上兩個案例，我們可以看到，使用CSS可以很方便地實現<div>元素的伸縮效果。這些技巧可以幫助我們更好地布局和樣式化網頁，使內容更加美觀和易讀。希望本文的代碼案例和說明能對你了解和使用CSS實現<div>元素的伸縮功能有所幫助。