CSS是前端開發過程中必不可少的一個重要技術。其中一個常見的需求是設置高度和寬度相等。實現這個需求的方法有很多，下面我們來討論常用的幾種方法。

// 方法一：使用padding
.box {
width: 100px;
padding-top: 100%;
/* 或者 padding-bottom: 100%; */
}

這種方法通過設置padding值為百分比，實現寬度與高度相等的效果。由于padding值相對于元素的寬度計算，因此給padding-top或padding-bottom賦值為百分之百，就會讓元素的高度等于寬度。

// 方法二：使用vw單位
.box {
width: 50vw;
height: 50vw;
}

這種方法利用vw單位（視口寬度的百分比）實現高度和寬度相等的效果。因為vw單位是相對于視口寬度計算的，當給寬度和高度都設置為相同的vw值時，元素就能夠呈現出正方形的效果。

// 方法三：使用絕對定位
.box {
position: relative;
width: 300px;
height: 300px;
}
.box:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

這種方法利用偽元素來實現寬度和高度相等的效果。需要用到絕對定位把偽元素定位在父元素的左上角，然后用寬度和高度設置為百分之百實現寬度和高度相等的效果。

除了以上三種方法，還有一些其他方法也能實現寬度和高度相等的效果，開發者可以根據需要靈活選擇。