固定宽高比例盒模型实现方案

前言

常规布局中，我们经常会遇到百分比布局的方式，也经常会遇到宽度与高度都设置百分比的情况，但高度值我们一般很少用百分比。尤其在百分比布局中，可能很多布局你是宽度百分比，高度固定px。对此你可知道原因么？

原因探索

追根本质原因是以为百分比是相对单位，而px是固定单位，如果高度设置为百分比，则是参考父元素高度，而宽度百分比是参考父元素宽度，两者参考点不同，所以得到的百分比效果自然不是你想要的效果。而用px为单位，两者都是绝对单位，同一单位，自然可以得到你想得到的宽高比例。

解决方案

解决方案很简单，将高度的参考点纠正为宽度的参考点即可。在已有的盒模型中，padding设置百分比就是参考父元素的宽度实现的。 下面我将用代码实现一个宽高为1：1的正方形红底，为父元素宽度30%的盒模型。

• html代码

  <!--布局盒模型-->
  <div class="demo">
  <!--布局内容-->
  <section class="demosec"></section>
  </div>
  复制代码

• css代码

  .demo{
  width: 30%;
  padding-top: 30%;
  position: relative;
  }
  .demo .demosec{
  position: absolute;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  background: red;		 	
  }
  复制代码