问:css如何实现一个自适应的正方形?
七娃博客
38 次
css如何实现一个自适应的正方形盒子?并且宽度未知,高度未知,不能写死,要求宽高为弹性单位%。
.box2{ width: 30%; height: 0; padding-bottom: 30%; }
height为0,是为了防止高度自动撑高;
padding-bottom的高度和width一样,保证是个正方形,不变形;而且不能用 padding-top,否则,内容被撑出!
.box2{ width: 30vw; height: 30vw; }
这样的面试题经常出现在大厂,考验的是对css的灵活运用,对于新手来说,很不容易想到用padding撑高度!
觉得文章有用,支持一下作者吧!1分不嫌少,9.9不嫌多!
使用支付宝打赏
使用微信打赏
评论 | 0 条评论
登录之后才可留言,前往登录