前言
在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱~
正方形
这很简单，设置盒子宽高都为200px就可以了
1<div class="box">小明写的</div>
2
3.box {
4 width: 200px;
5 height: 200px;
6 background: pink;
7}
自适应正方形
青铜
提起自适应，想必都会想到rem、vw等相对单位，我们分别用这些单位来实现一下。
rem
1<div class="rem">rem</div>
2
3body {
4 font-size: 16px;
5}
6
7.rem {
8 width: 10rem;
9 height: 10rem;
10 background: pink;
11}
12
13@media only screen and (max-width: 1200px) {
14 body {
15 font-size: 12px;
16 }
17}
屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px * 160px；
屏幕宽度小于1200px时，字体为12px，rem的盒子的大小为 120px * 120px；
实际应用场景屏幕宽度变化会动态计算rem的值，这里只用于案例理解。
优点
在适配了rem的项目中，可以直接使用rem设置盒子宽高，即自适应正方形
缺点
在未设置rem的项目中，单独为了实现自适应正方形有点大材小用
vw
可以看到正方形跟随着屏幕宽度的变化自适应，这是我们想要的效果
优点
vw为内置视口单位，可直接使用。
缺点
在实际的业务场景中，将设计稿的尺寸转化为vw相对麻烦
黄金
使用 百分比+padding，这里有一个很细的知识点；当padding、margin取值为百分比时，百分比的值是以父元素的width为参考。
1<div class="padding"></div>
2
3.padding {
4 width: 20%;
5 padding-top: 20%;
6
7 background: #696969;
8}
我们给盒子的宽度设置20%，使用的padding的纵轴将盒子高度撑开，这样便得到了一个自 适应正方形。
细心的小伙伴会发现，现在是个自适应正方形没错了，但是高度被占满了，内容没地方放了。 是的，当前只是一个正方形；在实际业务场景中，内部不是图片就是其他内容，不止需要一个正方形的。
解决办法：再嵌套一层内容盒子，外层方形盒为相对定位，内层内容盒为绝对定位；内层盒宽高基于外层方形盒，代码如下
1<div class="box-wrap">
2 <div class="box-content">我是内容区域</div>
3</div>
4
5.box-wrap {
6 position: relative;
7 width: 20%;
8 padding-top: 20%;
9}
10
11.box-content {
12 position: absolute;
13 width: 100%;
14 height: 100%;
15 top: 0;
16 left: 0;
17 z-index: 1;
18 background: burlywood;
19}
.box-content类为内容盒，我们可以在内容盒里为所欲为还原设计稿了。
若方形区域只需要展示图片，同理如下
这里我们就实现了一个自适应方形图片了。
优点
无需其他配置，设置灵活，扩展性强。
缺点
需要额外嵌套一层内容盒（个人拙见）
钻石
他就是css属性aspect-ratio
aspect-ratio，简言之就是宽高比。多说无益，上代码
一个属性，自适应正方形就OK啦；属性再好，也得看兼容性和浏览器支持。
优点
属性通俗易懂，无需其他配置，无需嵌套内容盒。
缺点
唯一缺点就是兼容性了