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

前言

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

发布者

Robinson Zhang

热爱前端,热爱分享,坚持高频写作,从小白到大师只是时间问题。

发表评论