CSS是前端開(kāi)發(fā)中的重要組成部分，它為我們提供了豐富的樣式控制方式，讓我們的網(wǎng)頁(yè)更加美觀和易讀。在實(shí)際開(kāi)發(fā)中，我們經(jīng)常遇到需要讓元素的高度和寬度相同的情況，比如正方形圖片、按鈕等，那么該如何實(shí)現(xiàn)呢？

實(shí)現(xiàn)元素高度和寬度相同，有很多方法，以下是其中幾種常用的：

/* 第一種方法：使用padding */
.square {
width: 100px;
height: 0;
padding: 50px 0;
}

這種方法利用了padding百分比值相對(duì)于元素寬度計(jì)算的特性，設(shè)置上下padding值為50%即可實(shí)現(xiàn)高度和寬度相同。需要注意的是，元素的height值必須設(shè)置為0，否則padding值會(huì)撐大元素。

/* 第二種方法：使用偽元素 */
.square::before {
content: "";
display: block;
width: 0;
height: 0;
padding-bottom: 100%;
}
.square {
position: relative;
}
.square >* {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

這種方法也是利用了padding百分比值相對(duì)于元素寬度計(jì)算的特性，將元素的高度設(shè)為0，通過(guò)偽元素設(shè)置padding-bottom值為100%實(shí)現(xiàn)高度和寬度相同。需要注意的是，元素的position屬性必須為relative，子元素的position屬性必須為absolute。

/* 第三種方法：使用絕對(duì)定位 */
.square {
position: relative;
width: 100px;
height: 100px;
}
.square >* {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

這種方法需要將父元素的position屬性設(shè)為relative，子元素的position屬性設(shè)為absolute，并用top、left、bottom、right屬性將子元素固定在父元素的四個(gè)角落，從而實(shí)現(xiàn)高度和寬度相同。

以上是三種常用的讓元素高度和寬度相同的方法，開(kāi)發(fā)中可根據(jù)實(shí)際情況選擇適合的方式。