实现自适应的正方形效果，即让元素高度随宽度改变。

    实现的思路是父元素设置宽度，子元素宽度100%，然后控制子元素撑开父元素的高度，撑开的高度和宽度成一定比例。正方形就是1:1，其他比例的实现原理相同。

    有两种方式，

    • 一种是使用子元素的padding-top或者padding-bottom撑开父元素高度，因为子元素的padding的百分比是相对于父元素的宽度。
    • 另一种方法是用子元素的伪类将父元素高度撑开。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     <style>
    7.       #block1 {
    8.         width: 100px;
    9.       }
    10.       .block1-wrapper {
    11.         width: 100%;
    12.         height: 0px;
    13.         background-color: red;
    14.         padding-bottom: 100%;
    15.       }
    18.       #block2 {
    19.         width: 100px;
    20.       }
    21.       .block2-wrapper {
    22.         position: relative;
    23.         width: 100%;
    24.         overflow: hidden;
    25.         background-color: blue;
    26.       }
    27.       .block2-wrapper::after {
    28.         content: '';
    29.         display: block;
    30.         margin-top: 100%;
    31.       }
    32.       .block2-content {
    33.         position: absolute;
    34.       }
    35.     </style>
    36.   </head>
    37.   <body>
    38.     <div id="block1">
    39.       <div class="block1-wrapper">123</div>
    40.     </div>
    41.     <div id="block2">
    42.       <div class="block2-wrapper">
    43.         <div class="block2-content">123</div>
    44.       </div>
    45.     </div>
    46.   </body>
    47. </html>