css实现固定宽高比例的div

使用padding实现

这个方法的原理是，padding和margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。

利用这个原理，可以通过设置padding-top / padding-bottom的百分比值，获得固定宽高比例的元素。

固定宽高的元素是画出来了，但是具体使用的时候还要往里面添加子元素，需要让子元素绝对定位，占满空间。

使用的例子如下

<style>
  .wrap {
    
    width: 200px;
  }

  .box {
    
    background-color: oran