CSS定義高度等于寬度

如何在CSS中定義高度等于寬度的元素呢？這是一個很常見的需求，尤其是在使用響應式設計時。下面介紹幾種實現方法。

利用padding

.square{
width: 200px;
padding-bottom: 200px;
background-color: red;
}

通過設置padding-bottom為寬度，可以實現元素高度與寬度相等。需要注意的是要將元素設置為塊級元素，并設置背景色。

利用vw

.square{
width: 50vw;
height: 50vw;
background-color: blue;
}

利用視口寬度vw，可以將元素的高度設置為與寬度相等。需要注意的是，這種方法在移動設備上的效果比較好。

利用偽元素

.square{
position: relative;
width: 200px;
background-color: green;
}
.square::before{
content: "";
display: block;
padding-bottom: 100%;
}

利用偽元素before，可以在元素內部創建一個高度為0，寬度為100%的塊級元素，再利用padding-bottom將其高度設置為元素寬度的比例。

以上三種方法都可以實現CSS定義高度等于寬度的效果，可以根據實際需求選擇使用。