圣杯布局
有三个很重要的点：
1、中间margin的宽度可以自适应，随浏览器窗口改变而改变
2、main模块要放在文档流的前面，因为浏览器解析html是一行一行解析的，这样可以保证页面主题内容先被加载
3、使用现有的技术实现，并在各大主流浏览器之间相互兼容
圣杯布局的制作步骤
1.写下HTML代码，规定main、left、right的区域，并添加如下样式
html代码：
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css代码
.left {
width: 300px;
height: 400px;
background-color: red;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
}
.main {
height: 500px;
background-color: pink;
}
2.使三个区域都处于左浮动状态，并使main的宽度成父容器的100%
改造的后css代码：
.left {
width: 300px;
height: 400px;
background-color: red;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
}
.main {
width: 100%;
height: 500px;
background-color: pink;
}
.left,
.right,
.main {
float: left;
}
3.为两侧侧边栏添加负margin，用以调整位置，其中摆在左边的left的margin-left为-100%，而右边的right的margin-left则为负的其自身的宽度。（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）
改造后的css代码：
.left {
width: 300px;
height: 400px;
background-color: red;
margin-left: -100%;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
margin-left: -300px;
}
.main {
width: 100%;
height: 500px;
background-color: pink;
}
.left,
.right,
.main {
float: left;
}
4.为class="container"的主容器设置左右margin值，使其为以后的侧边栏定位空出位置，margin的值为侧边栏的宽
改造后的css代码：
为了好看，我多设置了10px，用作隔开
.left {
width: 300px;
height: 400px;
background-color: red;
margin-left: -100%;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
margin-left: -300px;
}
.main {
width: 100%;
height: 500px;
background-color: pink;
}
.left,
.right,
.main {
float: left;
}
.container {
margin: 0 310px;
}
5.对left和right添加position:relative，然后对它们进行定位，移动到两侧，我们的圣杯布局就初步做完了，但是还有问题：
改造后的css代码:
.left {
width: 300px;
height: 400px;
background-color: red;
margin-left: -100%;
left: -310px;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
margin-left: -300px;
left: 310px;
}
.main {
width: 100%;
height: 500px;
background-color: pink;
}
.left,
.right,
.main {
float: left;
position: relative;
}
.container {
margin: 0 310px;
}
圣杯布局留下的问题
1.当我把整个页面的宽度收缩后，会出现布局错乱的效果：
2.产生这个问题的原因
当页面收缩时，main因为是其父容器container的100%的宽度，所以main也会跟着收缩，当main收缩到比left宽度还要小，这时候父容器container的100%宽度<left的宽度，就不能容纳left，所以将其挤到了下一行，right同理。
3.解决方案
可以给父容器container加上一个min-width样式，min-width的值不能小于right和left两者间的宽度最大值，这样做可以使中间的main的宽度始终比right和left大，就不会导致布局错乱了。
圣杯布局代码一览:
双飞翼布局
双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。
双飞翼布局的制作
1.首先圣杯布局的步骤到了这一步：
2.给main里面添加一个内容标签content，并且设置它的左右margin值为左右侧边栏的宽度：
3.去掉main的背景色和高度，双飞翼布局就做成了
双飞翼布局和圣杯布局的对比
优点：
1.双飞翼布局完美解决了圣杯布局的布局错乱问题；
2.双飞翼布局CSS代码逻辑更简单；
缺点：
添加了无意义的标签；
实际应用：
个人更偏向于使用双飞翼布局，但也会根据具体的需求进行使用
