今天群里有哥们问了一下，百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。
第一个方法利用图片的等比例缩放，用base64写一个1*1的透明png图片，宽度100%，这样容器就自动被撑成一个正方形，
demo如下
test*{
margin:0;
padding:0;
}
.img{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.img img{
width: 100%;
display: block;
}
提示：你可以先修改部分代码再运行。
不过这样写的坏处是多了个img标签，看着不干净，于是想了另一种方法，就是利用padding的百分比值基于父容器宽度的特性，给div的after伪元素一个padding-top:100% 的值，这样就把高撑的和宽度一样了，demo如下：
test*{
margin:0;
padding:0;
}
.box{
display:inline-block;
margin: 1%;
width: 30%;
background: #ff6600;
}
.box::after{
display: block;
padding-top: 100%;
content : '';
}
提示：你可以先修改部分代码再运行。
恩这样看起来是不是清爽多了。
