CSS-百分百布局

1、照片随着大小变化；

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

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

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

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

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

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

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