## 前言 常规布局中，我们经常会遇到百分比布局的方式，也经常会遇到宽度与高度都设置百分比的情况，但高度值我们一般很少用百分比。尤其在百分比布局中，可能很多布局你是宽度百分比，高度固定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; } ~~~