1、圣杯布局概述
圣杯布局是有淘寶的工程師提出，巧妙的利用我們介紹過的定位技術(shù)、負邊距、相對定位、浮動、組合運用。輕松實現(xiàn)常見布局。
??我們在前面介紹過，使用浮動特性，實現(xiàn)三列布局，但是使用div布局，有一個問題，那就是內(nèi)容區(qū)，在左邊區(qū)和右邊區(qū)之后渲染。下面我們使用圣杯布局的思路，實現(xiàn)一個內(nèi)容區(qū)渲染在前的三列布局。
2、圣杯布局實現(xiàn)步驟
（1）負邊距技術(shù)實現(xiàn)初步效果
可以參考負邊距定位章節(jié)，了解實現(xiàn)細節(jié)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.left{
width:198px;
height:200px;
float:left;
border: 1px solid red;
margin-left :-100%;
}
.right{
width:198px;
height:200px;
border: 1px solid blue;
float: left;
margin-left :-200px;
}
.center{
width : 100%;
height:200px;
float: left;
background :gray;
}
.footer{
clear:both;
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
運行效果：
image.png
（2）利用padding實現(xiàn)，將center元素固定在中間
.container{
padding-left:200px;
padding-right:200px;
height:200px;
}
運行效果：
image.png
（3）利用相對定位技術(shù)，將元素拉回左邊和右邊
left 添加如下樣式:
position:relative;
left:-200px;
right 添加如下樣式:
position:relative;
right:-200px;
運行效果：
image.png
3、布局缺陷
（1）左邊區(qū)塊和右邊區(qū)塊，利用了相對布局。
（2）內(nèi)容區(qū)高度塌陷。
