用伪类实现一个div的宽度和高度是固定百分比

Posted 2020-09-12 桔子_Lynn

遇到一个题目：一个div宽度是固定百分比的情况下，如何设置高度是宽度的80%

看到题目的第一反应是用js控制，获取到div的宽度之后再用宽度的80%来设置div的高度，但是如何在不用js的情况下，只用CSS来实现呢

下面是示例代码：

html代码：

<div class="outer"></div>

CSS代码：

.outer{
    width: 30%;
    background: #eee;
}
.outer:after{
    content: \'\';
    display: block;
    padding-top: 80%;
}

效果如图：

上图中，宽度是高度的80%，那么实现原理是什么呢？

因为div的宽度是30%而没有设置高度，当设置div的伪类padding-top是80%时，本该以高度为标准的，但是没有高度便会默认以宽度为标准，

伪类的padding-top设置成80%便会把父元素撑开，此时div就算没有设置高度也会被撑开，并且高度是宽度的80%；

那么想实现一个响应式的正方形就容易多了，只要设置div的伪类padding-top是100%即可，这样div将一直是一个正方形

最后总结一下：padding-top & padding-bottom 这两个css属性，父节点没有固定高度，他们就会参照父节点的宽度来设置自己的百分比；

（组内大神总结出来的解决办法，by新手小白的记录）