在CSS中，為了實現頁面的美觀和布局，我們通常要設置元素的寬度和高度。但是，有時候我們需要讓元素的寬度等于高度，這該怎么實現呢？接下來讓我們來探討一下。

樣式代碼：
.square{
width:100px;
height:100px;
border-radius:50%;
background-color:#E6E6FA;
}
.square{
width:50%;
padding-top:50%;
background-color:#E6E6FA;
position:relative;
}
.square:before{
content:"";
display:block;
}
.square:before{
padding-top:100%;
}
}

在我們的日常工作中，我們通常會用正方形來代表一個元素。我們可以通過設置元素的寬度和高度，使得它的形態變為正方形。具體來說，我們可以直接設置元素的寬度和高度均為相同的像素值，以實現正方形的效果。

但是，如果頁面上要展示大量的正方形元素，我們就不能一一手動調整它們的寬度和高度了。這個時候，我們需要用到一些技巧來實現元素寬度等于高度的效果。

我們可以先嘗試使用一個固定的比例，比如說50%。首先，我們將元素的寬度設置為50%，然后通過設置padding-top為50%來撐起元素的高度。這樣做的效果就是元素的寬度等于高度。接著，我們再通過設置:before選擇器，并設置其padding-top為100%來還原元素的高度，從而實現我們所需的效果。

在這個過程中，我們通過對背景顏色進行了設置，來使得元素在被壓縮時依然保持正方形的形態。

在CSS中，我們可以通過這種方式，實現元素寬度等于高度的效果。通過這些技巧，我們可以更好地控制頁面的布局，并且在展示元素的正方形效果時，可以更加靈活地掌控。