在前端開發中，我們常常需要對網頁元素進行布局和樣式的調整。其中，元素的寬度和高度是非常重要的屬性之一，可以決定著頁面的外觀和布局。
對于一些需要形成比例關系的元素，我們可以使用CSS的寬度和高度成比例的技巧來實現。該技巧主要是通過設置寬度和高度的百分比來形成等比例的元素。
舉個例子，我們想讓一個div元素的寬度和高度保持2:1的比例關系，我們可以使用以下的代碼：

<div class="wrapper">
<div class="box"></div>
</div>
<br>
<style>
.wrapper {
position: relative;
width: 100%;
padding-top: 66.67%; /* 2:1比例的計算：height / width = 1 / 2，即 height = 50% * width，所以 padding-top 的值為 50% / 75% = 66.67% */
}
<br>
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
}
</style>

我們首先設置一個wrapper容器元素，并設置其position屬性為relative，寬度為100%。然后，在該容器元素中增加一個padding-top屬性，該屬性的值為66.67%，這部分比例計算的詳細解釋已在代碼中給出。
在容器元素中，我們再添加一個box元素，并設置其position屬性為absolute，top和left屬性為0。通過寬度和高度都為100%，我們可以讓該元素完全覆蓋wrapper容器元素。此時，我們也已經成功實現了一個寬高比例為2:1的div元素。
以上是一種比較常見的實現方法，也非常適用于一些固定比例的場景。當然，對于其他比例的元素，我們也可以通過調整padding-top的值來實現。
總之，CSS的寬度和高度成比例技巧為我們的頁面布局提供了一種實現方式，既簡潔又優雅。在實際開發中，我們可以通過靈活運用該技巧來滿足不同元素的布局需求。