CSS 是網頁設計中非常常用的一種語言，可以讓我們實現豐富的樣式效果。其中，設置元素的高度等于寬度可能是我們在實際開發過程中經常用到的一個功能。下面我們來看看如何實現這個效果：

/* 方法一：利用padding百分比實現 */
.box {
width: 200px;
padding-top: 100%; /* 設定元素上邊距為寬度的一半 */
position: relative; /* 保證子元素定位相對于父元素 */
}
.box-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* 方法二：利用vw單位實現 */
.box {
width: 50vw; /* 設定寬度為視口寬度的一半 */
height: 50vw; /* 設定高度等于寬度 */
}
/* 方法三：利用偽元素實現 */
.box {
position: relative; /* 保證偽元素定位相對于父元素 */
width: 200px;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /* 設定偽元素上邊距為寬度的一半 */
}
.box-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

以上三種方法分別利用了 padding、vw 單位和偽元素來實現高度等于寬度的效果。不同的方法適用于不同的場景，大家可以根據實際情況選擇合適的方式。總之，精通 CSS 語言對于網頁設計人員來說非常重要，希望大家都能夠努力學習，掌握更多實用的技巧！