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

解决方案:

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

 

分析:

height为0,是为了防止高度自动撑高;

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

解决方案二:

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

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