20201026-BO2作业问题总结

在完成第二次培训作业的过程中，遇到了不少问题，在本文中总结记录解决方案。

div设置背景图片 内容过少导致塌陷

方法1：计算并设置padding-bottom撑开div

在用百分比对padding进行设置时，数值是相对于容器width而言的。在设置背景图片时，可计算背景图片的高宽比，并将其作为容器padding-bottom的取值。即可

• 当容器内部还有其他元素时，应将容器的position参数设为relative，而容器内元素的position参数设为absolute，相对于容器进行定位。

例如
要求实现的效果如图所示

在背景图片的高宽比为20%的容器(class="wrapper")中，只有两个标签而不足以撑起整个div，导致背景图片显示不全。

<div class="wrapper">
	<div class="inside">
			<p>新品9折