虽然设置的是垂直方向的高度，有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说， padding-top 和 padding-bottom 的值为百分比时，其实表示的是其元素宽度的百分比。
因此，在容器宽度不确定的情况下(如: 80% , flex: 1 等），保持容器宽高比不变，可以通过设置元素的 padding-top 或 padding-bottom 值。
例如，保持宽高比为16:9：
这个在保持图片的宽高比时非常有用。
可以利用css的伪类样式来控制，
<div class="dv-show">移上来可以查看
</div>
<style>
.dv-show{display:nonewidth:100pxheight:100pxbackground:#000color:#fff}
.div-show:hover{display:block}
</style>
父容器就是用来包含目标元素的容器，相反，子元素就是在目标元素内的，父子是一个相对的概念
比如
<div><p></p>
</div>
根据上面的代码p元素就是div的子元素，div就是p的父容器
