用css实现自适应正方形

用CSS实现自适应正方形
不多说，直接上代码，本文章一共例举了3种方案
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现自适应正方形</title>
    <style>
      /*使用padding-bottom实现正方形*/
     .square1 {
        width: 10%;
        padding-bottom: 10%;/* padding百分比相对父元素宽度计算,用padding去填充height*/
        height: 0;/*避免被内容撑开多余的高度 */
        background: #4acfff;
     }
     .square2 {
        width: 10%;
        height: 10vw;
        background: pink;
     }
     .square3{
         width: 10%;
         overflow: hidden;
         background: yellow;
     }
     .square3:after {
         content:'';
         display: block;
         margin-top: 100%;
      }
    </style>

</head>
<body>
    <!-- 使用padding-bottom实现正方形 -->
    <!-- padding百分比相对父元素宽度计算,用padding去填充height -->
     <div class="square1">使用padding-bottom实现正方形</div>
    <!-- 使用css3单位vw -->
    <!-- 原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦-->
    <div class="square2">使用css3单位vw实现正方形</div>
    <!-- 使用伪类margin -->
    <div class="square3">使用伪类margin</div>
</body>
</html>