圣杯布局:在css中圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;
1.利用flex
关键:父元素开启flex布局,默认flex-direction为row,即子元素从左到右排列,通过flex:1自适应剩余空间,order排序。
flex:1自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 200px;
background-color: antiquewhite;
text-align: center;
}
.left {
width: 200px;
order: 1;
background-color: aqua;
}
.center {
flex: 1;
order: 2;
}
.right {
width: 200px;
/* 排序 */
order: 3;
background-color: rgb(255, 149, 143);
}
</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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 200px;
background-color: rgb(222, 161, 80);
text-align: center;
padding: 0 200px;
}
.left {
width: 200px;
height: 200px;
left: -200px;
margin-left: -100%;
float: left;
position: relative;
background-color: blueviolet;
}
.center {
width: 100%;
float: left;
height: 100px;
}
.right {
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: -100%;
background-color: rgb(255, 149, 143);
}
</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>
优点:不会像圣杯布局那样变形
缺点:多了一层dome节点。