## 前言 常規布局中，我們經常會遇到百分比布局的方式，也經常會遇到寬度與高度都設置百分比的情況，但高度值我們一般很少用百分比。尤其在百分比布局中，可能很多布局你是寬度百分比，高度固定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; } ~~~