采用和上一篇不一样的方法来实现圣杯布局
第一步，依然是定义基本结构和样式。
<!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、left、right中都设置float:left。
效果图
第三步，上一步依然是由于main宽度占据了整个浏览器所以left和right被挤到了第二排。我们先把left移动到最左边：margin-left:-100%,为什么是-100%呢，因为已经给三个div都添加了left浮动，现在我们视作它们在同一行，如图
添加后的效果图
同理，为right添加margin-left:-200px后效果图如下
第四步，为container添加padding：0 200px 0 200px，为什么不是margin详见上一篇。按理来说此时应该完成了，但是添加padding后left和right两部分也跟着往中间移动了。所以现在要把left和right移回去，这里用到的是相对定位，因为是相对自身原本位置进行移动。那么left添加left:-200px,right添加right:-200px即可。
效果图
到这里就完成了。但是为什么这里为right块添加的right属性不是200px而是-200px呢，向右移动难道不是x轴正方向应该为正数吗？因为right首先是相对父元素右边线的距离，这个距离在原来基础上减小了所以是-200px，我觉得也可以这样理解，以右侧为基点，所以坐标轴此时向左为增大即正方向，向右为减小即负方向，是一样的道理。
最后想说一些体会，最近在通过看视频教程的方式学习CSS，个人觉得比看书效果更好，老师讲解更透彻更便于理解和记忆。同时，学习过的内容要加以输出才能变为自己的，在逐步完成一个案例的过程中对遗忘知识点的回顾查找以及对案例思路的梳理，才是真正内化的过程。