页面布局中我们经常需要用百分比来实现宽度自适应，但是如果这时候高度要跟宽度呈固定比例变化，该怎么办呢?

很简单我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现，即如果元素的padding或margin值是百分比值，那么，它的值是根据父元素的宽度来计算的。

所以实现一个自适应的正方形，可以有两种写法：

可以这么写：

<style>
    .box{
        width: 50%;
        padding-top: 50%;
        background-color: black;
    }
</style>
<div class="box"></div>

也可以这么写：

<style>
        .box{
            overflow: hidden;
            width: 50%;
            background-color: black;
        }
        .margin{
            margin-top: 100%;
        }
    </style>
    <div class="box">
        <div class="margin"></div>
    </div>

两种方法略有不同，大家可以自行比较，也可以脑洞一些其他方法。