在CSS中，我們可以使用自適應布局來使元素的高度和寬度相等，這種布局方式可以確保元素在不同設備和屏幕尺寸上都能保持一致的外觀和體驗。

要實現(xiàn)自適應布局，我們可以使用CSS的Flexbox或Grid布局系統(tǒng)，這些布局系統(tǒng)提供了靈活的方式來控制元素的大小、位置和關系，從而幫助我們創(chuàng)建出高度和寬度相等的元素。

下面是一個使用Flexbox布局實現(xiàn)高度和寬度相等的示例：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.box {
  width: 50%;
  height: 50%;
  border: 1px solid #000;
}

在這個示例中，我們創(chuàng)建了一個容器（container），并使用Flexbox布局將其子元素（box）的寬度和高度都設置為容器寬度和高度的50%，這樣，無論容器的大小如何變化，子元素的大小都會保持相對一致，從而實現(xiàn)自適應布局。

我們還可以使用CSS的vw和vh單位來進一步實現(xiàn)自適應布局，這些單位分別表示視口寬度和視口高度的百分比，從而幫助我們創(chuàng)建出在不同設備和屏幕尺寸上都能保持一致的元素。

使用CSS的自適應布局功能，我們可以輕松地創(chuàng)建出高度和寬度相等的元素，從而提升網(wǎng)站的兼容性和用戶體驗。