在Web開(kāi)發(fā)中，正方形是非常常見(jiàn)的一種形狀。然而，HTML并沒(méi)有提供原生的制作正方形的標(biāo)簽，這時(shí)我們需要使用CSS來(lái)制作正方形。

.square {
width: 100px;
height: 100px;
}

上述代碼是最基本的制作正方形的CSS代碼，我們可以通過(guò)控制寬度和高度值來(lái)使它們相等。但是，如果我們想要讓正方形具有響應(yīng)式布局呢？

.square {
width: 50%;
padding-bottom: 50%;
position: relative;
}
.square::before {
content: "";
display: block;
padding-top: 100%;
}
.square >* {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

上述代碼使用了CSS偽元素和絕對(duì)定位，利用padding-bottom和padding-top的比例關(guān)系來(lái)制作正方形。在正方形容器內(nèi)部，內(nèi)容使用絕對(duì)定位完全覆蓋容器。這種方法可以使得正方形具有響應(yīng)式布局。