在CSS中，通過設置height屬性可以控制元素的高度。height屬性接受一個具體的數值或百分比，它可以讓元素的高度保持固定或根據父元素自適應。但是，如果我們想要讓一個元素的高度從0開始逐漸伸長到指定的高度，該怎么實現呢？

這時候我們可以利用CSS3的transition屬性來實現高度伸展的效果。具體來說，我們需要做以下幾步：

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

首先，我們設置元素的height屬性為0，并將transition屬性設置為height 0.5s ease，表示元素的高度變化需要0.5秒，并且采用緩動效果。同時，我們將overflow屬性設置為hidden，這樣在高度為0的情況下，元素的內容就不會顯示出來。

然后，我們利用JavaScript來動態地添加或刪除一個名為open的類。這個類的作用是將元素的height屬性設置為200px，此時我們會發現，元素的高度會從0逐漸變為200px，并且每個高度的變化都會有一個流暢的過渡效果。

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