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

来源：7-5 Vue项目首页 - 图标区域页面布局

qq_一只特立独行的猪_04375190

2019-01-12

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

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

写回答

3回答

迷路mil

2020-11-06

楼上没说到点子上

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

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

HarryZhao

2019-01-22

首先要明白一个问题：设置 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

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

2019-08-01

共1条回复

Dell

2019-01-12

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

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 1