1，圣杯布局：适用：侧边栏宽度固定，内容区宽度随着浏览器窗口宽度改变而改变
优点：没有额外的div，允许任何列是最高的？？（什么意思??）
2，可以实现主内容区优先加载，
3，需要hack很少
缺点：在宽度缩小时可能会对圣杯布局发生破坏，因此可以设置最小宽度：
body{
min-600px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
100%;/*左栏上去到第一行*//*设置宽度自适应*/
height:100px;
background:blue;
}
#left{
float:left;
180px;
height:100px;
margin-left:-100%;/*负外边距百分号是相当于#middle的宽度的百分数*/
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative;
left:-180px;/*确定left的位置信息*/
}
#right{
float:left;
200px;
height:100px;
margin-left:-200px;//设置-200px后，right块会跳上去
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
笔记：是对于margin-left负外边距的理解特别当其为百分数时，这个百分数是相对于谁的??,如何定位？？
二：
双飞翼布局：
双飞翼布局是在圣杯布局的基础上改进的布局，特点，在圣杯布局的main（上面的middle）内部添加一个div，取消right和left部分的positon：relative，而同时对于main内部的div元素内添加margin-left和margin-right，给中间内容留下空间，取消bd中的padding，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min- 700px;
}
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
margin-left: 180px;
margin-right: 200px;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
height:100px;
}
#main{
float:left;
100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
180px;
height:100px;
margin-left:-100%;
background:#0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
}
#right{
float:left;
200px;
height:100px;
margin-left:-200px;
background:#0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
<div id="main">
<div id="middle">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
三：变化，两栏布局，侧栏宽度固定，主内容区宽度随窗口大小改变而改变
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main,.left{
float: left;
height: 100px;
}
.main{
100%;
background-color: red;
}
.left{
200px;
margin-left: -100%;/*注意，这里加了百分号就不一样了，百分号表示相当于main元素的百分号*/
background-color: blue;
}
.inner{
margin-left: 200px;/*让main内元素显示不会在侧栏之下，给侧边栏留出空间来*/
}
//侧栏在右边的情况，注意侧栏的margin—right or margin-left根据侧栏位置是不同的
.main2,.right{
float: left;
height: 100px;
}
.main2{
100%;
background-color: red;
}
.right{
200px;
margin-left: -200px;
background-color: blue;
}
.inner2{
margin-right: 200px ;
}
</style>
</head>
<body>
<!--布局1,侧栏在左边，中间部分可以调整宽度-->
<div class="main"><!--main元素位于前面，表示优先渲染-->
<div class="inner">main</div>
</div>
<div class="left">left</div>
<!--布局二，侧栏在右边，宽度固定-->
<div class="main2">
<div class="inner2">main</div>
</div>
<div class="right">right</div>
</body>
</html>