CSS設置長寬一致是很常見的需求，通常用于制作正方形或圓形的元素。有多種方式可以實現這個效果，下面介紹其中的三種。

方式一：

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

該方式簡單明了，直接將元素的寬高設為相同的值，達到長寬一致的效果。但是如果要制作一個變化大小的正方形，就需要使用其他方式。

方式二：

.element {
width: 50%;
padding-bottom: 50%;
}

通過設置寬度為50%，并將元素的padding-bottom屬性也設為50%，可以實現元素長寬相等的效果。這個方法同樣適用于制作變化大小的正方形，可以將寬度和padding-bottom的值設為相同的百分比。

方式三：

.element {
width: 100px;
height: 100px;
position: relative;
}
.element::before {
content: "";
display: block;
padding-top: 100%;
}
.element >* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

這種方式是通過偽元素和絕對定位實現的。首先將元素的寬高設為相同的值，并設置為相對定位。然后通過在元素上添加偽元素，并將其高度設為100%的方式，將寬高比例拉長，使它與元素的寬度相等。接著在元素內添加一個子元素，并將它的絕對定位設為左上角，寬高設為100%，即可實現長寬一致的效果。