在CSS中，通過(guò)設(shè)置height屬性可以控制元素的高度。height屬性接受一個(gè)具體的數(shù)值或百分比，它可以讓元素的高度保持固定或根據(jù)父元素自適應(yīng)。但是，如果我們想要讓一個(gè)元素的高度從0開(kāi)始逐漸伸長(zhǎng)到指定的高度，該怎么實(shí)現(xiàn)呢？

這時(shí)候我們可以利用CSS3的transition屬性來(lái)實(shí)現(xiàn)高度伸展的效果。具體來(lái)說(shuō)，我們需要做以下幾步：

代碼如下：
CSS:
.box {
height: 0;
transition: height 0.5s ease;
overflow: hidden;
}
.box.open {
height: 200px;
}
HTML:
內(nèi)容
JS:
var box = document.querySelector('.box');
box.addEventListener('click', function() {
box.classList.toggle('open');
});

首先，我們?cè)O(shè)置元素的height屬性為0，并將transition屬性設(shè)置為height 0.5s ease，表示元素的高度變化需要0.5秒，并且采用緩動(dòng)效果。同時(shí)，我們將overflow屬性設(shè)置為hidden，這樣在高度為0的情況下，元素的內(nèi)容就不會(huì)顯示出來(lái)。

然后，我們利用JavaScript來(lái)動(dòng)態(tài)地添加或刪除一個(gè)名為open的類。這個(gè)類的作用是將元素的height屬性設(shè)置為200px，此時(shí)我們會(huì)發(fā)現(xiàn)，元素的高度會(huì)從0逐漸變?yōu)?00px，并且每個(gè)高度的變化都會(huì)有一個(gè)流暢的過(guò)渡效果。

使用CSS3的transition屬性，我們可以非常方便地實(shí)現(xiàn)高度從0伸展的效果，并且在代碼中也非常簡(jiǎn)潔清晰。這種做法在網(wǎng)頁(yè)制作中非常常見(jiàn)，既美觀又實(shí)用。