css如何实现一个自适应的正方形盒子？并且宽度未知，高度未知，不能写死，要求宽高为弹性单位%。

解决方案：

.box2{ 
    width: 30%;
    height: 0;
    padding-bottom: 30%;
}

分析：

height为0，是为了防止高度自动撑高；

padding-bottom的高度和width一样，保证是个正方形，不变形；而且不能用 padding-top，否则，内容被撑出！

解决方案二：

.box2{ 
    width: 30vw;
    height: 30vw;
}

这样的面试题经常出现在大厂，考验的是对css的灵活运用，对于新手来说，很不容易想到用padding撑高度！