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

遇到一个题目：一个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新手小白的记录）