CSS 怎么实现宽高自适应的正方形

1. 方法一，使用vw

 <div style="width: 20vw; height: 20vw; background-color: black"> </div>

2. 方法二使用百分比

<div
    style="
      width: 20%;
      padding-top: 20%;
      /* padding-top或padding-bottom都可以 */
      background: #696969;
    "
  >

3. 方法三，使用aspect-ratio

<div class="width: 200px; aspect-ratio: 1; background-color: red;"> </div>

4. 方法四，使用em或者rem

  <div style="font-size: 10px">
    <div style="width: 20em; height: 20em; background-color: bisque"></div>
  </div>

5. 方法五,直接给固定的宽高

 <div style="width: 200px; height: 200px; background-color: blue"></div>