未知宽度写一个随父元素宽度改变的正方形` .box{ width: 30%; } .a{ padding-bottom:

<style>
  .box{
          width: 30%;
  }
  .a{
          padding-bottom: 100%;
          background-color: aqua;
          height：0
  }
</style>
<body>
<div class="box">
        <div class="a"></div>
</div>

</body>

这里我们可以设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width）在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。