圣杯和双飞翼布局
1.什么是圣杯布局和双飞翼布局？
1.圣杯布局和双飞翼布局有共同的特性：两遍的宽度不变，中间的区域进行自适应。但是中间的区域放在左侧！就是cener，left，right
2.还可以使用flex布局来实现，中间区域的自适应。
3.今天先介绍1的两种布局
2.圣杯布局的步骤
1.设置一个容器，放三个盒子
2.设置两侧盒子的宽度。固定的宽度
3.设置中间的宽度等于容器的宽度（100%）
4.设置容器的padding的宽度等于两侧盒子的宽度。（padding：0 两侧盒子的宽度）
5.让容器内的盒子在同一个方向浮动（float：left）
6.设置左边的盒子margin-left=-100%；
7.通过定位设置左侧盒子的位置，让左侧盒子不要盖住中间的区域,position:relative left=-自身的宽度
8.设置右边的盒子的margin-left=-自身盒子的宽度（margin-left=设置的宽度的宽度）
9.通过定位设置右边盒子，让右边的盒子不要盖住中间的区域，position:relative left=自身盒子的宽度
10.防止缩放变形，设置一个最小宽度
<!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>
*{
margin: 0;
padding: 0;
}
.left,.right{
width: 200px;
height: 200px;
background: red;
float: left;
}
.center{
width: 100%;
height: 200px;
background: aqua;
float: left;
}
.box{
padding: 0 200px;
min-width: 500px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.双飞翼布局
1.设置一个容器，放三个盒子
2.设置两侧盒子的宽度。固定的宽度
3.设置中间的宽度等于容器的宽度（100%）
4.让容器内的盒子在同一个方向浮动（float：left）
5.给center添加一个子div，给子元素设置margin:0 两侧盒子的宽度；
6.设置左侧盒子的margin-left=-100%;
7.设置右侧盒子的margin-left=-自身的宽度；
<!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>
*{
margin: 0;
padding: 0;
}
.left,.right{
width: 200px;
height: 200px;
background: red;
float: left;
}
.center{
width: 100%;
height: 200px;
background: blue;
float: left;
}
.center>.center-in{
margin: 0 200px;
height: 200px;
background: aqua;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div class="center-in">
中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
4.双飞翼和圣杯布局的不同
1.其实两者，都差不多。都是两侧宽度固定，中间自适应，自适应的盒子放在左侧
2.双飞翼布局是圣杯布局的升级版，更加简便，只是又添加了一个盒子而已
3.双飞翼布局不再设置自身的定位，移动防止挡住中间盒子的区域