CSS实现正方形或等边矩形

方法一：使用vmin或者vmax

vmin=min{vw,vh}取的是两者中较小的值，vmax =max{vw,vh}取的是两者中较大的值。

div {
    width: 10vmax;
    height: 10vmax;
    background-color: red;
}

方法二：使用padding实现

由于margin， padding的百分比数值是相对父元素的宽度计算的， 只需将元素垂直方向的一个padding值设定为与 width相同的百分比就可以制作出自适应正方形了。

但要注意， 仅仅设置padding-bottom是不够的， 若向容器添加内容，内容会占据一定高度，为了解决这个问题， 需要设置height：0。

div {
    background-color: red;

    width: 10%;
    padding-bottom: 10%;
}

如果div有内容的话，还需要设置height: 0，但是照成的问题是如果里面有内容，则不显示，解决办法，内容使用absolute定位。

方法三：使用伪元素padding/margin 撑开元素

适用于div没有内容的情况。如果有内容的话，内容使用absolute定位或者浮动即可。

div {
    background-color: red;
    width: 20%;
    overflow: hidden;
}
div::before {
    content: '';
    display: block;
    margin-top: 100%;
}

（完）