1) 直接采用 vw 布局
高度和宽度统一采用 vw 布局，达到高度宽度自适用的效果。
.child { width:50vw, height:50vw }
存在的问题：只能相对于 viewport 进行布局，很多时候我们的业务场景并不是想对于窗口大小缩放正方形大小。
2）采用 padding 相对
padding 百分比其实是相对父元素的宽度进行计算的，举个简单的小🌰。
<div style="width: 200px;height: 200px;background-color: pink;"> <div style="width:50%;padding-bottom: 50%; background-color: blue;"></div> </div>
这种布局方式，一般会给父元素设置固定宽度，而子元素设置 width 百分比布局，通过 padding 也是基于父元素的宽度前提下，进行百分比适配
存在的问题：如果容器内有内容的话，会撑开容器高度，简单看个demo。
<div style="width: 200px;height: 200px;background-color: pink;"> <div style="width:50%;padding-bottom: 50%; background-color: blue; color: aliceblue;">111111111</div> </div>
很明显，在容器内添加内容，这个时候高度发生了改变，就不是我们需要的“正方形”了。
解决办法： 通过设置容器 heigth 为 0 ，我们就可以强行将这个元素的高度限制为只能由 padding 来控制了（高度无非就是 contentWidth + paddingWidth）
<div style="width: 200px;height: 200px;background-color: pink;"> <div style="width:50%;padding-bottom: 50%; background-color: blue; color: aliceblue;height:0;">111111111</div> </div>
3) 巧用伪元素 + margin
<div style="width: 200px;height: 200px;background-color: pink;"> <div class="box"></div> <style> .box { background-color: blue; color: white; width: 50%; overflow: hidden; } .box::after { content: ""; display: block; margin-top: 100%; } </style> </div>
这里和 padding 的使用是类似的，margin 百分比也是相对于父元素的 width ,设置伪元素的 margin-top: 100% 其实就是撑开容器的 height，让 heigth = width；
解释一下这里为什么需要设置 overflow:hidden; 开启 BFC。这里是因为父子嵌套的元素垂直方向的margin取最大值。 详细一点的推荐大家阅读：juejin.cn/post/697627…
如果没有 overflow:hidden; 那就会是这样
缺点：容器内无法填充内容
总结
- vw 实现正方形，布局相对于窗口大小，使用场景少
- padding 百分比 + height 设置为 0； 最常用也是最推荐的方式
- 伪元素设置 margin 100% 撑开容器，无法填充内容，不推荐
