圣杯布局：圣杯布局是三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，也就是在html文档中，中间的部分
要写在左右布局之前。
圣杯布局需要用到的东西
1.圣杯布局，需要用到浮动，负边距，相对定位（相对自身定位relative），这种方法不需要添加额外的标签
2.关于margin或者padding单位是百分比的时候，它是基于父级元素或者包含的宽度来进行计算。
<style>
.main{
width:100%;
float:left;
background:#D6D6D6;
}
.left{
width:150px;
background:#E79F6D;
float:left;
margin-left:-100%; /*相对于包含快的宽度*/
position:relative;
left:-150px;
}
.right{
float:left;
width:190px;
background:#77BBDD;
margin-left:-190px;
position:relative;
right:-190px;
}
.bd{
padding-left:150px;
padding-right:190px;
}
</style>
</head>
<body>
<div class="bd">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right
</div>
</div>
</body>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)