2021-07-29 实现一个自适应正方形

1、padding-top+position

.box{
    width:50%;
    padding-bottom:50%;
}

position：relative
position-top:100%，就可以得到一个正方形的盒子
有时width不是100%，比如width：20%，这时，使得padding-top：20%，就可以。
即（padding-top/width = 1）就是正方形。
(padding-top/width=1/2)就是二比一的长方形

2、视窗单位
视窗是浏览器实际显示内容的区域，即不包括工具栏和按钮的网页浏览器。单位是vw、vh，但是考虑兼容性，不推荐

.box{
    width:50vw;
    height:50vw;
}