CSS作為網頁設計的重要組成部分，為我們提供了眾多的樣式控制方式。其中，元素寬高相等也是設計中常用的一種樣式。那么，如何實現元素的寬高相等呢？

/*利用padding實現寬高相等*/
.box {
width: 100px;
height: 0;
padding: 50px;
}

上述代碼中，我們將元素的寬度設置為100px，同時將padding值設置為50px。由于padding會撐開元素的寬高，因此元素的寬高相等也就實現了。

/*利用媒體查詢實現寬高相等*/
@media screen and (max-width: 768px) {
.box {
width: 100px;
height: 100px;
}
}

在某些特定情況下，我們需要在不同設備上實現寬高相等。這時可以通過媒體查詢來實現。在上面的代碼中，我們設置了一個最大寬度為768px的媒體查詢，然后設置元素的寬高為100px。這樣在設備寬度小于768px時，元素的寬高就相等了。

/*利用flex布局實現寬高相等*/
.container {
display: flex;
}
.box {
flex: 1;
}

在現代化的網頁設計中，我們常常使用flex布局進行樣式控制。在flex布局中，我們可以通過設置flex屬性來實現元素的寬高相等。在上述代碼中，我們將父容器設置為flex布局，然后將子元素的flex屬性設置為1。這樣，子元素的寬高就相等了。