CSS是網頁設計中不可或缺的一部分，它可以幫助我們控制網頁的布局和樣式。我們經常需要讓元素的高度等于寬度，今天就來介紹一下如何實現這個效果。

首先，我們可以使用padding-bottom屬性來實現元素高度等于寬度的效果。具體操作就是先設置一個固定寬度的元素，然后通過padding-bottom屬性來設置元素的高度，值為百分比形式的寬度，比如padding-bottom:100%。

.demo {
width: 100px;
padding-bottom: 100%; /* 高度等于寬度 */
}

上面的代碼就可以讓高度等于寬度，值得注意的是，這種方法只能用于固定寬度的元素，如果寬度是按百分比的話，那么元素高度并不會等于寬度。

還可以使用vw和vh單位來實現元素高度等于寬度的效果，它們分別代表視口寬度和視口高度，是相對單位，不會受到元素尺寸的影響，使用起來很方便。

.demo {
width: 50vw; /* 寬度等于視口寬度的一半 */
height: 50vw; /* 高度等于寬度 */
}

這種方法可以用于任何寬度，而且還可以通過改變vw值來控制元素的大小。

最后要注意的是，在進行元素高度等于寬度的設置時，還需要注意元素所在的容器大小，否則可能會出現一些意想不到的問題。