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

樣式代碼：
.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%;
}
}

在我們的日常工作中，我們通常會用正方形來代表一個元素。我們可以通過設(shè)置元素的寬度和高度，使得它的形態(tài)變?yōu)檎叫巍＞唧w來說，我們可以直接設(shè)置元素的寬度和高度均為相同的像素值，以實現(xiàn)正方形的效果。

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

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

在這個過程中，我們通過對背景顏色進(jìn)行了設(shè)置，來使得元素在被壓縮時依然保持正方形的形態(tài)。

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