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