自适应正方形

自适应正方形

思路：

使用 百分比+padding，当padding、margin取值为百分比时，百分比的值是以父元素的width为参考。

代码示例：

<div class="box"></div>

.box-wrap {
    width: 40%;
    padding-top: 40%;
}

如何在正方形内部添加内容

上面自适应正方形高度被占满了，内容没地方放了。 可以再嵌套一层内容盒子，外层方形盒为相对定位，内层内容盒为绝对定位；内层盒宽高基于外层方形盒，如下。

<div class="box">
    <div class="content">我是内容区域</div>
</div>

.box {
    position: relative;
    width: 40%;
    padding-top: 40%;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    z-index: 1;
}