圣杯布局:在CSS中,圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;
1.利用flex
关键:父元素开启flex布局,默认flex-direction
为row
,即子元素从左到右排列,通过flex:1
自适应剩余空间,order排序。
flex: 0 0 200px; 第一个值表示放大,第二个值表示缩小,第三个值表示所占width
flex: 1; 自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: aqua;
display: flex;
text-align: center;
}
.left {
width: 200px;
order: 1;
background-color: burlywood;
}
.center {
flex: 1;
order: 2;
}
.right {
width: 200px;
order: 3;
background-color: rgb(149, 32, 60);
}
</style>
</head>
<body>
<div class="box">
<div class="center">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
2.float浮动+margin(经典)
关键:全部设置float:left
,并给#box
设置padding
。设置center
的宽度width:100%,通过margin-left:-100%
、 margin-right: -100%
;和相对定位的方式,调整left
和right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: rgb(198, 22, 238);
text-align: center;
padding:0 200px;
}
.center {
height: 200px;
width: 100%;
}
.left {
width: 200px;
height: 200px;
left: -200px;
margin-left:-100%;
position: relative;
background-color: burlywood;
}
.right {
width: 200px;
height: 200px;
margin-right: -100%;
position: relative;
background-color: rgb(149, 32, 60);
}
.center,.left,.right{
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="center">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
3.绝对定位
关键:父元素设置相对定位,left
和right
设置绝对定位。通过绝对定位的方式让left
和right
位于center
的两侧,调整center的
margin使其内容不被遮挡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
background-color: rgb(198, 22, 238);
position: relative;
}
.center {
height: 200px;
/* 留出左右两个位置 */
margin: 0 200px;
}
.left {
width: 200px;
height: 200px;
position:absolute;
background-color: burlywood;
left: 0;
top: 0;
}
.right {
width: 200px;
height: 200px;
position:absolute;
background-color: rgb(149, 32, 60);
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="center">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
圣杯布局的缺点:正常情况下是没有问题的,但是特殊情况下就会暴露此方案的弊端,如果将浏览器无线放大时,圣杯将会破碎掉。
附加
双飞翼布局
双飞翼布局,为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 200px;
}
.content{
width: 100%;
}
.center {
height: 200px;
margin: 0 220px;
background-color: aqua;
}
.left {
width: 200px;
height: 200px;
margin-left: -100%;
background-color: burlywood;
}
.right {
width: 200px;
height: 200px;
margin-left: -200px;
background-color: rgb(237, 17, 69);
}
.content,.left,.right{
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="center">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html>
优点:不会像圣杯布局那样变形
缺点:多了一层dom节点