布局技巧
1、等高布局
等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。
1.1、实现要点(需求)
-
多列
-
每一列背景不同
-
其中任意一列变高,其它列同步变高
1.2、方法一
1.2.1、原理
利用padding和margin负值相抵消
1.2.3、优缺点
1.3、方法二
1.3.1、原理
盒子层层嵌套,利用内层盒子高度变化,外层盒子的高度也会同步变化
1.3.2、实现步骤
-
利用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
-
合理的控制padding和margin值
-
可以实现任意列等高布局
-
准备三个负责背景的盒子.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;实现