页面布局
左右两侧宽度固定，中间部分自适应的三列布局
1、圣杯布局
实现方法
1）HTML结构中，先主体内容后侧边
2）两侧宽度固定，中间宽度设置100%
3）两侧盒子和中间盒分别加浮动(float:left;)
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒子的宽度）
5）通过左、中、右盒子的父级盒将中间内容露出来（在父级盒上设置padding: 0 右侧盒子的宽度 0 左侧盒子的宽度）
6）分别还原左侧盒子和右侧盒子（为左侧盒和右侧盒设置position: relative; 为左侧盒子设置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>圣杯布局</title>
<style>
.clearfix::after{
content: '';
display: block;
clear: both;
}
.center{
width: 100%;
min-height: 300px;
background: red;
float: left;
}
.left{
width: 200px;
min-height: 300px;
float: left;
background: blue;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 300px;
min-height: 300px;
background: orange;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
.wrap{
padding: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
主体内容，左右固定，中间宽度自适应
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
2、双飞翼布局
实现方法
1）HTML结构中，先主体结构（主体结构盒中包含主体内容盒）后侧边
2）两侧宽度固定，中间宽度设置100%
3）两侧盒子和中间盒分别加浮动（float:left;）
4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒子的宽度）
5）在主体结构盒的子盒（主体内容盒）上设置margin值，将中间内容露出来（margin: 0 右侧盒子的宽度 0 左侧盒子的宽度）
实现代码
<!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>双飞翼布局</title>
<style>
.wrap::after{
content: '';
display: block;
clear: both;
}
.center{
width: 100%;
float: left;
}
.centerCon{
min-height: 300px;
background: blue;
margin: 0 300px 0 200px;
}
.left{
width: 200px;
min-height: 300px;
background: red;
float: left;
margin-left: -100%;
}
.right{
width: 300px;
min-height: 300px;
background: orange;
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">
<div class="centerCon">
主体内容，宽度自适应
</div>
</div>
<div class="left"></div>
<div class="right">
</div>
</div>
</body>
</html>
圣杯布局和双飞翼布局方法比较
用途
实现左右宽度固定，中间宽度自适应的布局
方法实现区别
圣杯布局
大盒子套三个小盒子，
center盒在最上面: width：100%， float:left
left盒: width:固定1 float:left margin-left:-100% position:relative left:width固定1值
right盒: width:固定2 float:left margin-left:-width固定2值 position:relative right:width固定2值
父级盒: padding: 0 width(right盒子) 0 width(左盒子) 用处：使文字居中，不处在左右
双飞翼布局
大盒子套三个小盒子，
center盒在最上面,center盒内套一个小盒子(最小盒): width：100%， float:left
最小盒centercon 设置最小高 margin:0 width(right盒子) 0 width(左盒子)
left盒: width:固定1 float:left margin-left:-100%
right盒: width:固定2 float:left margin-left:-width固定2值
1、圣杯布局使用padding控制居中，定义好三列布局，中间盒独占一行，左右盒浮动其下，
使用margin-left使其浮动中间盒左右，
将父级盒: padding: 0 width(right盒子) 0 width(左盒子)，留出左右盒空间使文字居中不溢出
这时候你会发现左右盒在并未在中间盒的两侧，因为使用了padding离左右还有距离，
这时使用 position:relative、right:width固定值调整位置。
2、双飞翼布局使用margin控制居中，定义好三列布局，中间盒独占一行，左右盒浮动其下，
使用margin-left直接使其浮动中间盒左右
