css实现正方形
如果仅仅是设置width 和 height的话，这个问题就不用说了，这里考虑的问题主要是padding的百分比是相对于谁来说的
元素的padding 和 margin百分比都是想对应父元素的width(父元素必须有width这个值 否则往上查找知道body)来说的， 如下通用的css正方形方案
相对于父元素width
.container {
width: 100px;
height: 100px;
}
.square {
width: 100%;
padding-bottom: 100%;
background: red;
}
可以设置高度，利用伪元素
.square {
width: 100px;
background: green;
}
.square:after {
content: '';
display: block;
padding-bottom: 100%;
}
设置一个伪元素，伪元素用的是利用 padding-bottom撑起父元素的高度，padding相对高度为 父元素的 width
不同单位 相对于视口 而且利用vw
.container {
width: 5%;
height: 5vw;
background: red;
}