CSS（層疊樣式表）是一種常用的前端開發語言，它可以幫助我們實現各種各樣的頁面效果。在今天的文章中，我們將學習如何使用CSS實現寬高相等的效果。

/* 設置容器的寬度和高度相等 */
.equal-container {
width: 200px;
height: 200px;
}
/* 將目標元素的寬度和高度設置為100% */
.equal-item {
width: 100%;
height: 100%;
}

以上就是實現寬高相等的關鍵代碼。首先，我們需要創建一個容器元素，并設置它的寬度和高度相等。接著，我們將目標元素（即需要實現寬高相等的元素）的寬度和高度都設置為100%。這樣一來，目標元素的寬度和高度就會自動繼承容器元素的寬度和高度，從而實現了寬高相等的效果。

另外，還有一種方法可以實現寬高相等的效果，那就是使用padding-top屬性。具體操作如下：

/* 設置容器的寬度 */
.equal-container {
width: 200px;
}
/* 將目標元素的寬度設置為100%且設置padding-top為100% */
.equal-item {
width: 100%;
padding-top: 100%;
}

以上代碼中，我們將容器元素的寬度設置為200px，而目標元素的寬度仍然設置為100%。接著，我們使用padding-top屬性來實現寬高相等的效果。具體來說，我們將padding-top設置為100%，這樣一來，目標元素的寬度和高度就會自動繼承容器元素的寬度，并且高度也會根據padding-top的值自動計算出來，從而實現了寬高相等的效果。

綜上所述，使用CSS實現寬高相等的方法有很多種，我們可以根據具體的需求選擇合適的方法。希望本文對大家有所幫助！