CSS作為前端開發中的必備技能之一，涵蓋了大量的屬性和功能，其中之一就是高度等比例。

.box{
width: 300px;
height: 0;
padding-bottom: 75%;
background-color: gray;
position: relative;
}
.box::before{
content: "";
display: block;
padding-top: 100%;
}
.content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: white;
text-align: center;
}

上述代碼實現了一個高度等比例的響應式盒子，padding-bottom屬性設置了盒子的下內邊距為寬度的75%，使得盒子在任何寬度下都能保持高度與寬度的比例為4：3。同時，使用::before偽元素設置了高度為0的空元素，在此元素上設置padding-top屬性為100%，以占據在padding-bottom所騰出的空間。最后，在.content里設置絕對定位，使得內容遮罩在可視區域上方。

高度等比例的響應式盒子在實際開發中經常被用到，比如各種圖片、視頻等媒體的展示，此時我們可以利用上述技巧讓元素在不同寬度下都保持美觀的長寬比例，提升用戶體驗。