难度

难度级别：中高级及以上                               提问概率：80% 

---

宽高自适应的需求并不少见，尤其是在当今流行的大屏系统开发中更是随处可见，很显然已经超越了我们日常将div写死100px这样的范畴，那么如何实现一个宽高自适应的正方形呢？这里提出两种实现方案。

一种方案是不设定高度，设定padding-top值与宽度值相同的方式，将div撑开，但需要注意的是，元素的padding值如果是百分比的话，基值是父元素的宽度，代码如下

HTML代码：
<div class="box">
<div class="box-inner"></div>
</div>
CSS代码：
<style>
.box {
width: 200px;
height: 200px;
}
.box-inner {
width: 20%;
height: 0;
border: 1px solid red;
padding-top: 20%;
}
</style>

 另一种方案是使用vw来适应浏览