CSS：实现一个宽高自适应的正方形（***三颗星）

1.使用vw实现

vh 和 vw 是相对于视口的高度和宽度。 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px ;

<style>
        .div {
            width: 10%; /* 或者width: 10vw; 都可以实现自适应正方形*/
            height: 10vw;
            background-color: red;
        }
    </style>

<div class="div"></div>

2.利用元素的margin/padding百分比是相对父元素width的性质来实现

padding-top的%定义基于父元素宽度的百分比上内边距。此值不会如预期的那