元素的padding 和 margin百分比都是想对应父元素的width（父元素必须有width这个值 否则往上查找知道body）来说的， 如下通用的css正方形方案
设置一个伪元素，伪元素用的是利用 padding-bottom撑起父元素的高度，padding相对高度为 父元素的 width
有好几种办法，这里说两种，存CSS
第一种
<div style="width:50%padding-bottom:50%height:0pxbackground:#ccc">
</div>
第二种
<div style="width: 50vw height: 50vw background:green">
</div>
首先，最简单的办法是把宽和高设为相同的固定值。但是如果是采用自适应布局的，比如正方形的宽是屏幕宽度的50%，则要这样：
<div style="width:50% height:50vw background-color:#f00"></div>唯一要注意的就是可能存在浏览器兼容问题，不过我在手机微信内置浏览器以及电脑的Chrome上测试都没问题
