CSS中的高度和寬度是網(wǎng)頁設(shè)計(jì)中非常常見的屬性。有些情況下，我們需要把元素的高度和寬度設(shè)置成一樣的，以達(dá)到更好的視覺效果和統(tǒng)一的設(shè)計(jì)風(fēng)格。這時(shí)候，我們可以使用CSS中的一些屬性來實(shí)現(xiàn)高寬一致。

// HTML代碼
<div class="box"></div>
// CSS代碼
.box {
width: 100px;
height: 100px;
}

上述代碼中，我們給一個(gè)div元素指定了寬度和高度，且寬度和高度的值都是100px。這樣就可以實(shí)現(xiàn)一個(gè)邊長為100px的正方形了。

但是，在實(shí)際開發(fā)中，有時(shí)候我們需要響應(yīng)式布局，即元素的寬高需要隨著屏幕大小的變化而自適應(yīng)調(diào)整。這時(shí)候，我們可以使用下面的代碼：

// CSS代碼
.box {
width: 50%;
padding-top: 50%;
background: red;
position: relative;
}
.box::before {
content: "";
display: block;
padding-bottom: 100%;
}
.box .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #fff;
}

上述代碼中，我們使用padding-top來設(shè)置元素的高度，并讓該值等于元素寬度的一半；同時(shí)，設(shè)置了一個(gè)偽元素來撐開高度，以及一個(gè)子元素用于顯示內(nèi)容。這種方法可以實(shí)現(xiàn)一個(gè)響應(yīng)式的長方形，寬高比例始終保持為1:1。

除了上述方法，還可以使用純CSS方式實(shí)現(xiàn)高寬一致。具體方法是使用vw（viewport width）作為元素寬度的值，再通過padding-top來設(shè)置元素的高度。

// CSS代碼
.box {
width: 50vw;
padding-top: 50vw;
background: blue;
position: relative;
}
.box::before {
content: "";
display: block;
padding-bottom: 100%;
}
.box .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
color: #fff;
}

以上就是CSS中實(shí)現(xiàn)高寬一致的幾種方法，我們可以按照實(shí)際需求選擇適合的方式。