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

前言

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