css padding-top,padding-bottom 百分比值的使用（高度自适应）

css使用小技巧

当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时，计算结果是参照父元素的宽度
可以把这一特性用作一些特殊处理的小技巧，比如高度自适应问题，还有我最近了解到的图片占位，避免图片等资源加载的时候出现闪烁抖动
html：

<div class="father">
	<div class="childern">
      <img :src="bgImage" alt="">
    </div>
    <div class="childern">
      <img :src="bgImage" alt="">
    </div>
</div>

css：

.childeren{
	position: relative;
	width: 50%;
	height: 0;
	padding-top: 40%;
	display: inline-block;
	overflow: hidden;
}
img{
	position: absolute;
	top:0;
	left: 0;
	width: 100%
}

这样就能实现图片根据父元素的宽度自适应，等比显示了