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

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

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

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

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

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

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

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