什么是圣杯布局和双飞翼布局
两者实现的功能都一样，都是用于实现两侧的宽度不变，中间的宽度自适应的三栏布局
圣杯布局的步骤
1.创建个容器，里面放三个盒子
2.设置两侧盒子的宽度（固定）
3.设置中间盒子的宽度等于容器的宽度（100%）
4.设置容器的padding等于两侧盒子的宽度
5.让三个盒子都在同一个方向上浮动
6.设置左边盒子的margin-left = -100%
7.通过定位调整左边的盒子，让其不盖住中间的区域
8.设置右边盒子的margin-left = -自身宽度
9.通过定位调整右边的盒子，让其不盖住中间的区域
10.给容器设置一个最小的宽度，防止缩小后变型
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background-color: purple;
padding: 0 200px;
min-width: 400px;
}
.content {
width: 100%;
height: 200px;
background-color: skyblue;
float: left;
}
.left, .right {
width: 200px;
height: 200px;
background-color: red;
float: left;
position: relative;
}
.left {
margin-left: -100%;
left: -200px
}
.right {
margin-left: -200px;
right: -200px;
}
</style>
<div class="wrap">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
双飞翼布局的步骤
1.创建个容器，里面放三个盒子
2.设置两侧盒子的宽度（固定）
3.设置中间盒子的宽度等于容器的宽度（100%）
4.让三个盒子都在同一个方向上浮动
5.给中间盒子添加一个子盒子
6.给子盒子设置margin 0 两侧盒子的宽度
7.设置左边盒子的margin-left = -100%
8.设置右边盒子的margin-left = -自身宽度
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background-color: purple;
}
.content {
width: 100%;
height: 200px;
background-color: skyblue;
float: left;
}
.content-item {
height: 200px;
margin: 0 200px;
background-color: blue;
}
.left, .right {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
<div class="wrap">
<div class="content">
<div class="content-item"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
