简述CSS实现自适应正方形、等宽高比矩形 ？

在CSS中，我们可以使用padding-top或padding-bottom的百分比值来实现自适应的正方形或等宽高比的矩形。这是因为padding-top和padding-bottom的百分比值是基于元素的宽度来计算的。

自适应正方形：

如果你想实现一个自适应的正方形，你可以设置padding-bottom为100%。例如：

.square {
  width: 100%;
  padding-bottom: 100%;
  background-color: red;
}

在这个例子中，.square类的元素将会是一个自适应的正方形，其高度始终等于其宽度。

等宽高比的矩形：

如果你想实现一个等宽高比的矩形，你可以设置padding-bottom为你想要的百分比。例如，如果你想要一个宽高比为16:9的矩形，你可以设置padding-bottom为56.25%（9/16=0.5625）。例如：

.rectangle {
  width: 100%;
  padding-bottom: 56.25%;
  background-color: red;
}

在这个例子中，.rectangle类的元素将会是一个自适应的矩形，其宽高比始终为16:9。

注意，由于padding的存在，你可能需要在这个元素内部再添加一个元素来承载内容，以避免内容被压缩。例如

<div class="rectangle">
  <div class="content">这是一些内容</div>
</div>

<style>
.rectangle {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background-color: red;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

在这个例子中，.content类的元素将会填充整个.rectangle元素，你可以在.content元素中放置你的内容。