圣杯布局：是在三列布局左右定宽中间自适应的基础上，要求中间部分首先渲染，是通过父元素的左右边距来进行定位的
首先要理解
-
margin-top、margin-left设为负值的时候，会把元素上移、左移，文档流中的位置也会发生变化 -
position:relative的元素设置top、left后元素还占据原来位置，文档流中的位置不会发生变化
思路
//html
<div id='content'>
<div id='middle'>我在中间</div>
<div id='left'>我在左边</div>
<div id='right'>我在右边</div>
</div>
- 将三者都设置
float:left
- 将middle的宽度设置
width:100%
- 给left设置为margin为负值，左边部分会移到middle的前面，但是会覆盖一部分
margin-left:-100%;
- 给content设置padding，给左右留出空白
padding:0 100px;
- 给left设置相对定位，向左边移动100px，填充左边空白
left:-100px;
position:relative;
- 给right设置margin，让右边部分移到middle后面
margin-left:-100px;
- 给right设置相对定位，向右边移动100px
left:100px;
position:relative;
以上两步也可简化为
margin-right: -100%;
