css.布局技巧

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;
​
        }

3.1、双飞翼实现步骤

• .centerbox与.left，.right浮动在一行排列

• .centerbox固定宽度100%，left，.right固定宽度

• .centerbox内部嵌套.center，不定宽度，通过定义左右margin留出左侧列的宽和右侧列宽

• 移动.left通过margin-left:-100%；实现

• 移动.right通过margin-left:-200px；实现