前言

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

原因探索

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

解决方案

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

• html代码

        
        
         
         
        
  复制代码

• css代码

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