CSS-百分百布局

1、照片随着大小变化；

这里面重点就是每个包裹盒子是25%，图片是100%显示；

<div class="box2">
    <p>    //这里都是4个；
        <img src="./wangjunkai.png" alt="">
    </p>
</div>

.box2{
    width: %;
}
.box2 p{
    width:%;
    float: left;
}
.box2 p img{
    width: %;
}

2、固比固布局（圣杯布局）

左右是固定定位，中间设置百分比；重点有注释

 .box3{
     width:%;
     position: relative;
 }
.box3 p:nth-child(){
    position: absolute;    //浮动
    left: ;    //到最上面
    width:100px;
    height:100px;
    background: red;
}
.box3 p:nth-child(){
    width: %;
    height:100px;
    background: green;
    box-sizing:border-box;
    padding:  100px; //点睛之笔
}
.box3 p:nth-child(){
    width:100px;
    height:100px;
    background: red;
    position: absolute;    //浮动
    right: ;
    top:;        //到最上面
}

喜欢的小伙伴可以关注下我的微信公众号"前端伪大叔"