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

 

posted @ 2017-04-18 15:19  桔子_Lynn  阅读(1996)  评论(0编辑  收藏  举报