CSS 如何實(shí)現(xiàn)寬高相等 在網(wǎng)頁(yè)開(kāi)發(fā)中，許多情況下需要使元素的寬高相等，如制作方塊圖、網(wǎng)格布局等，那么該如何實(shí)現(xiàn)呢？ 方法一：利用 padding 最簡(jiǎn)單的方法就是利用 padding 來(lái)實(shí)現(xiàn)。我們?cè)O(shè)置一個(gè) div，寬高為 auto，然后給它設(shè)置一個(gè) padding-bottom 或 padding-top 或 padding-left 或 padding-right，讓它的值與寬度相等即可。 代碼如下:

div{
width: auto;
height:auto;
padding-bottom:100%;
}
/* 說(shuō)明：這里設(shè)置 padding-bottom 為 100% 是因?yàn)?width 和 height 都是 auto，所以不一定要用 padding-bottom*/

方法二：利用偽元素 除了 padding 外，我們還可以利用偽元素 ::before 或 ::after 來(lái)實(shí)現(xiàn)寬高相等。代碼如下：

div{
width: 200px;
height: auto;
position:relative;
}
div::before {
content: "";
display: block;
padding-top: 100%; /*等同于 height:0; width:100%;*/
}
/* 說(shuō)明：這里的 100% 是相對(duì)于父元素的寬度來(lái)計(jì)算的 */

方法三：利用 transform CSS3 中引入了 transform 屬性，我們可以設(shè)置一個(gè)元素為正方形，然后通過(guò) transform:scale() 來(lái)改變其大小，從而實(shí)現(xiàn)寬高相等。 代碼如下：

div{
width: 200px;
height: 200px;
background-color: #f00;
transform: scale(1, 1);
}
/* 說(shuō)明：這里的 transform: scale(1, 1) 表示沒(méi)有縮放 */

方法四：利用 grid 布局 CSS3 中的新特性 grid 布局也可以實(shí)現(xiàn)寬高相等。我們可以先設(shè)置一個(gè) grid 容器，然后將子元素的寬高設(shè)置為 1fr 即可。 代碼如下：

.wrapper{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.grid{
width: 100%;
height: 1fr;
background-color: #f00;
}
/* 說(shuō)明：這里的 1fr 表示平均分配剩余空間 */

以上就是幾種實(shí)現(xiàn)寬高相等的方法，不同的情況使用不同的方法，可以更好地實(shí)現(xiàn)需求。