核心就是：
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    这样可以保证子元素的高度是父元素的宽度的一半。

    不管是margin还是padding，给他们设置 top、right、bottom、left 的值的时候，如果取值是百分比的形式，这个百分比都是相对于父元素的宽度来取值的。

    1. <!DOCTYPEhtml>
    2. <htmllang="en">
    3. <head>
    4.   <metacharset="UTF-8">
    5.   <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    6.   <metaname="viewport"content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.     * {
    10.       margin: 0;
    11.       padding: 0;
    12.     }
    13.     html,
    14.     body {
    15.       height: 100%;
    16.     }
    17.     .outer {
    18.       width: 400px;
    19.       height: 100%;
    20.       display: flex;
    21.       align-items: center;
    22.       background-color: pink;
    23.       margin: auto;
    24.     }
    25.     .inner {
    26.       width: 100%;
    27.       height: 0;
    28.       /* 高度是父元素宽度的一半 */
    29.       padding-bottom: 50%;
    30.       background-color: orange;
    31.       position: relative;
    32.     }
    33.     .box {
    34.       position: absolute;
    35.       width: 100%;
    36.       height: 100%;
    37.       display: flex;
    38.       align-items: center;
    39.       justify-content: center;
    40.     }
    41.   </style>
    42. </head>
    43. <body>
    44.   <divclass="outer">
    45.     <divclass="inner">
    46.       <divclass="box">test</div>
    47.     </div>
    48.   </div>
    49. </body>
    50. </html>