聖杯布局：聖杯布局是三列布局，中間寬度自适應，兩邊定寬，這樣做的優勢是重要的東西放在文檔流前面可以優先渲染，也就是在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=)