老师，实在不能理解width：100%，heigh：0 padding-bottom:50%

Question

.icons
    width: 100%
    height: 0
    overflow: hidden
    padding-bottom: 50%
    background: green

这里为什么要设置height：0 ， padding-bottom：50%
直接设置height：50%为什么不行

Answer 1

迷路mil 2020-11-06 00:20:13

楼上没说到点子上

当margin或者padding取值是百分比的时候，无论是left，right或者top，bottom，都是以父元素的width为参考物，这样做可以进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

除了这种方法外还可以使用height:50vm，vm单位对低版本浏览器可能不兼容所以推荐使用上述方法。

Answer 2

HarryZhao 2019-01-22 22:14:51

首先要明白一个问题：设置 height：50% 是其父元素的高度的 50%，而 padding-bottom：50% 则是其父元素的宽度的 50%，width: 100% 是其父元素宽度的 100%。

老师之所以这样设置是为了能够让 .icons 这个盒子的高宽比为 1：2，利用了刚刚说的这个特点就能实现这个效果。

只是这样的设置方式很不符合直觉，因为其内容都显示到了 padding 上而不是在内容应该在的 content 部分，而且这样的设置也无法使用 padding 来让内容与盒子 border 之前产生距离来实现一些效果，想要实现这样的效果得使用像老师在课程中的绝对定位或者使用 transform。

所以也可以不按照这样的方式设置，可以直接给了一个 height: 3.7rem; 这样其实也是 2:1 的效果，而且可以使用 padding 来设置一些效果而不需要使用绝对定位。

• weixin_慕勒2484493 #1

  可是icons不是没有父元素吗？怎么可以设置padding-bottom呢

Answer 3

Dell 2019-01-12 23:46:25

你再听一遍这块我的讲解，padding-bottom是相对于宽度，而height是相对于高度