在網頁設計中，經常會遇到需要讓元素的高度和寬度相等的情況，這時候就需要使用CSS來完成這個效果。

首先，我們可以用CSS3中的aspect-ratio屬性來設置元素的寬高比例：

.square {
aspect-ratio: 1/1; /* 1:1 */
}

但是，這個屬性目前還不是所有瀏覽器都支持，所以我們可以用其他方法來實現相同的效果。

一種方法是使用padding百分比來設置元素的高度和寬度相等，比如：

.square {
width: 100px;
padding-top: 100%;
}

這個方法的原理是利用padding百分比相對于元素的寬度百分比進行計算，所以設置padding-top為100%就等于設置元素的高度和寬度相等。

另一種方法是使用偽元素來撐開元素的高度，比如：

.square {
position: relative;
width: 100px;
}
.square:before {
content: "";
display: block;
padding-top: 100%;
}

這個方法的原理是利用偽元素的絕對定位來撐開元素的高度，然后讓偽元素的padding-top為100%就等于設置元素的高度和寬度相等。

最后，需要注意的是，以上兩種方法都會讓元素的高度和寬度相等，所以如果你的元素內容過多，可能會造成溢出或者內容收縮，需要根據實際情況進行調整。