用伪类实现一个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新手小白的记录)