目录

1.效果展示 

 2.代码内容

 3.代码解析

（1）分析inner类写法

（2）分析container类写法

---

1.效果展示 

 2.代码内容

<div class="item"><div class="inner"><di class="container"></di></div>
</div>

    .item{background:red;width:50%;margin:0 auto;}.inner{width:100%;height:0;padding-bottom: 60%;position: relative;}.container{position: absolute;inset:0;background: grey;}

 3.代码解析

（1）分析inner类写法

 .inner{
        width:100%;
        height:0;
        padding-bottom: 60%;
        position: relative;
    }

将height设置为0，只设置底部内边距将类inner盒子的高度撑开

padding具有根据包含块宽度变化自动适应尺寸的特性，这里的inner包含块为item

即item包含块设置的宽度为百分之50

则类inner盒子，根据item包含块的50%，自适应宽度

（2）分析container类写法

    .container{
        position: absolute;
        inset:0;
        background: grey;
    }

绝对定位元素，配合inset设置0，自动填充，父盒子