圣杯布局：
什么是圣杯布局？三栏布局，左右两栏随着浏览器缩放宽度不变，中间栏自适应
知识点：浮动、定位、padding和margin的区别
我没有使用大部分教程的方法，但是效果相同。步骤如下：
第一步.定义基本结构和样式
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.container{
height:200px;
background-color: red;
}
.main{
width:100%;
height:100%;
background-color: blue;
}
.left,.right{
width:200px;
height:200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main">中间栏</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>效果图
因为中间main的宽度占据了100%，所以剩下的两个div块级元素自动换行被挤到下面来了。
第二步，我们要把它们放在同一行，所以就是为main、left、right加上float：right。
效果图
表明浮动有效，只不过还是同样的原因。
第三步，使用定位，由于绝对定位是脱离标准流的，所以会浮在蓝色块上方。但是仅仅使用position是不行的，还要为left和right加上边偏移，left:0或者right:0。
效果图
已经初有成效了，但是问题在哪儿，中间栏的文字被遮挡，本质就是被左右两块覆盖了，所以现在要让main移动到中间来。
第四步，此时是使用margin还是padding？答案是padding，因为使用margin后在原来100%的基础上加上宽度便会出现滚动条。
效果图
内容成功显示，浏览器缩放之后依然符合要求。
完整源代码
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.container{
height:200px;
background-color: red;
padding:0 200px 0 200px;
position: relative;
}
.main{
width:100%;
height:100%;
background-color: blue;
float:left;
}
.left,.right{
width:200px;
height:200px;
background-color: green;
float:left;
position:absolute;
}
.left{
left:0;
}
.right{
right:0;
}
</style>
</head>
<body>
<div class="container">
<div class="main">中间栏</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>