布局技巧

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

已于 2022-08-07 19:45:34 修改

阅读量95

点赞数

文章标签： css html css3

于 2022-07-30 21:35:37 首次发布

本文链接：https://blog.csdn.net/weixin_68531139/article/details/126078088

版权

本文详细介绍了前端布局中的等高布局，包括利用padding和margin负值相抵消的方法以及盒子嵌套的实现方式。同时，讲解了圣杯布局和双飞翼布局的原理与实现步骤，这两种布局模式主要用于创建三列结构，其中中间列自适应，两侧列固定。文章通过实例代码展示了各种布局在不同场景下的应用，有助于提升前端开发人员对复杂布局的理解和掌握。

摘要由CSDN通过智能技术生成

1、等高布局

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。

1.1、实现要点（需求）

多列
每一列背景不同
其中任意一列变高，其它列同步变高

1.2、方法一

1.2.1、原理

利用padding和margin负值相抵消

利用padding提前延伸背景
利用margin负值抵销padding的占位

    <div class="wrap">
        <div class="left">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣</div>
        <div class="center">当前，新冠疫情的防疫已进入新常态</div>
        <div class="right">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴</div>
    </div>

       .wrap{
            width:600px;
            border:10px solid #000;
            overflow: hidden;
        }
        .wrap::after{
            content:"";
            display: block;
            clear: both;
        }

        .left,.center,.right{
            float:left;

            padding-bottom:1000px;
            margin-bottom:-1000px;
        }

        .left{
            width:200px;
            /* 最小高度 ----指定盒子可以大于等于100px */
            min-height:100px;
            background-color:pink;
        }
        .center{
            width:200px;
            /* 最小高度 ----指定盒子可以大于等于100px */
            min-height:100px;
            background-color:yellowgreen;
        }
        .right{
            width:200px;
            /* 最小高度 ----指定盒子可以大于等于100px */
            min-height:100px;
            background-color:skyblue;
        }

1.2.2、实现步骤

通过浮动创建一个正常的三列布局（不同列背景不同）
父容器清浮动
每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位
父容器overflow:hidden

1.2.3、优缺点

合理的控制padding和margin值
可以实现任意列等高布局

1.3、方法二

1.3.1、原理

盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化

1.3.2、实现步骤

准备三个负责背景的盒子.bg1，.bg2，.bg3，HTML结构上层层嵌套
将.left，.center，.right盒子放入最内层的背景盒子.bg3里
最内层的盒子.bg3清浮动
将.bg2，.bg3相对于当前位置进行移动，形成三列背景效果
将.left，.center通过margin负值移动到对应的背景处即可

 <div class="wrap">
        <div class="bg1">
            <div class="bg2">
                <div class="bg3">
                    <div class="left">1当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣</div>
                    <div class="center">2当前，新冠疫情的防疫已进入新常态</div>
                    <div class="right">3当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴</div> 

                </div>
            </div>
        </div>
    </div>

 .wrap{
            border:1px solid #000;
            width:600px;
            overflow: hidden;

        }
        .bg1{
            background-color: pink;
        }

        .bg2{
            background-color: skyblue;
            position:relative;
            left:200px;
        }
        .bg3{
            background-color: orange;
            
            position:relative;
            left:200px;
        }


        .left,.center,.right{
            width:200px;
            float:left;
            min-height:100px;
        }

        .left{
            margin-left:-400px;
        }
        .center{
            margin-left:-200px;
        }

        .bg3:after{
            content:"";
            display: block;
            clear: both;
        }

1.3.3、优缺点

结构复杂
可以创建任意列数
方便通过百分比实现自适应

2、圣杯布局分析实现要点

三列（不一定等高）
改变加载顺序，优先加载中间列—（结构上:中左右，显示效果上：左中右）
中间列自适应，两侧列固定

2.1、圣杯布局

HTML

 <div class="wrap">
        <div class="center">中间</div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>

CSS

.wrap:after{
content:"";
display: block;
clear: both;
}
.wrap{
border:1px solid #000;
padding:0 200px;
min-width:200px;
}
.left,.center,.right{
float:left;
}

.left{
width:200px;
min-height:200px;
background-color: pink;
margin-left:-100%;
position: relative;
left:-200px;
}
.right{
width:200px;
min-height:200px;
background-color: skyblue;
margin-left:-200px;
position:relative;
left:200px;
}

.center{
width:100%;
min-height:200px;
background-color: yellowgreen;

}

2.2、圣杯实现步骤

外框左右固定padding值，预留左侧列和右侧列的列宽
.center宽度100%，.left，.right固定宽度
结构上.center，.left，.right依次浮动在一行排列
移动.left通过margin-left:-100%；配合相对定位position:relative；left:-200px；移动至左侧列位置
移动.right通过margin-left:-200px；配合相对定位position:relative；left:200px；移动至右侧列位置

3、双飞翼

HTML

<div class="wrap">
    <div class="centerbox">
    <div class="center">中间</div>
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

CSS

   .wrap:after {
            content: "";
            display: block;
            clear: both;
        }

        .wrap {
            border: 1px solid #000;
            min-width:600px;
           
        }

        .left,
        .centerbox,
        .right {
            float: left;
        }
        .centerbox{
            width:100%;
        }

        .left {
            margin-left:-100%;
            width: 200px;
            min-height: 200px;
            background-color: pink;
            margin-left: -100%;
          
        }

        .right {
            margin-left:-200px;
            width: 200px;
            min-height: 200px;
            background-color: skyblue;
            margin-left: -200px;
         
        }

        .center {
           margin:0 200px;
            min-height: 200px;
            background-color: yellowgreen;

        }