老师有两个问题

1、Swiper.vue文件中script里面导出的组件名HomeSwiper，在Home.vue里面变成了标签home-swiper，这个名字的大小写转换规则是vue内置好的对吗？就是全部转换成小写，然后中间大写处用-连接？

2、padding-bottom的设置可以讲讲吗？谢谢老师

源自：项目-首页开发 2-5 Vue项目首页 - 首页轮播图（1）

收起

1回答

好帮手慕糖 2020-12-17 17:20:16

同学你好，关于你的问题，回答如下：

1、是的哦，是内置好的。中间使用“-”链接，官网中也有说明，如下：

2、padding-bottom是设置底部填充的。

老师这里主要是利用padding属性的百分百是参考盒子宽度计算的这一特性，设置盒子实际占据页面的高度，图片默认是绝对定位的，所以设置padding-bottom不会影响到图片的位置，并且可以有效的防止由于网速问题，图片加载缓慢时，出现文字抖动效果（老师在视频中有演示这个问题）。

祝学习愉快~

提问者 hyperse #1

图片默认是绝对定位这一点，之前的学习好像都没有提到过诶，可以讲讲吗

2020-12-17 17:27:44
好帮手慕糖回复提问者 hyperse #2

同学你好，非常抱歉，老师上面说的图片这里不准确，并没有设置定位。是由于wrapper盒子没有设置高度，那么图片就会超出盒子，因为设置好了比例，所以超出的这部分，正好把padding-bottom部分盖住了。
非常抱歉，给同学的学习带来了不便。
祝学习愉快~

2020-12-17 17:47:54
提问者 hyperse 回复好帮手慕糖 #3

老师没关系。那我可不可以这样理解，wrapper这个父组件设置了padding-bottom，刚好是子组件的宽高比，然后页面展示的时候，父组件的padding-bottom先占位，图片加载出来之后直接覆盖在了父组件用padding-bottom占位的地方？

2020-12-17 17:52:54