圣杯布局
圣杯布局和雙飛翼布局都是常見的三欄布局，中間自適應，左右2邊固定，中間提前渲染。
主要知識點
浮動 float
負邊距 margin-left: -...
相對定位 position: relative
主要代碼塊
<div class="header">
<h4>這是一個開頭</h4>
</div>
<div class="container">
<div class="main">
圣杯布局，很久之前就聽過，但是一直都沒詳細了解過，本文是對它實現方式的一些總結，希望可以把這種技術推薦給跟我之前一樣對它比較陌生的開發人員.
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">
<h4>這是尾部</h4>
</div>
- 對header container footer設置相應的樣式
.header{
height: 40px;
background: red;
}
.footer{
height: 40px;
background: green;
}
.container{
background: #000;
}
- 對main left right設置相應的樣式
.main,.left,.right{
float: left;
}
.main{
width: 100%;
background: #35bbaa;
}
//這里就要注意了我們寬度等于父元素的寬度，所以下面的left，right就會由于沒有位置向下一排浮動，所以就引發了接下來的負邊距（前后擺放）
.left,.right{
width: 200px;
height: 200px;
}
.left{
background: #abcdef;
margin-left: -100%; //通過負邊距把元素放到main的前面，值為main元素的寬度
}
.right{
background: #666;
margin-left: -200px; //通過負邊距把元素放到main的后面，值為自身寬度
}
通過上訴方法我們實現了把三個元素當在同一行中，表面上看效果已經達到了自己的目的，但是我們在輸入main中的文字就可以看到問題了，左右2個元素擋住了主要內容的左右部分，什么原因呢？這個就要我們理解浮動元素了，由于left，right設置了左右浮動，所以脫離文本流，所以文字會忽視他們的位置，填充進去了。為了解決這個時候就需要給父元素增加padding來縮小main元素的寬度
- 對container設置相應的padding和right,left值的改動
.container{
background: #000;
padding: 0 200px; //值為對應的left，right
}
//然后通過定位使left，right，main三個排到一行
.left{
background: #abcdef;
margin-left: -100%; //通過負邊距把元素放到main的前面，值為main元素的寬度
position: relation;
left: -200px;
}
.right{
background: #666;
margin-left: -200px; //通過負邊距把元素放到main的后面，值為自身寬度
position: relation;
right: -200px;
}
鏈接地址： 點擊查看
以上就是圣杯布局的全部知識點
雙飛翼布局
在2006年提出的圣杯布局上，淘寶由于需求在圣杯布局上提出了相應的修改（自古中國出盜版。。。。。）
主要修改內容是
- 給main元素添加了一個子元素
- 然后減少了
position:relation等定位這4條代碼 - 給miain的子元素添加了一個
margin來縮小寬度
主要代碼
<div class="header">
<h4>這是開頭</h4>
</div>
<div class="container">
<div class="main">
<div class="layout">
雙飛翼布局，為了中間div內容不被遮擋，直接在中間div內部創建子div用于放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
多了1個div，少用大致4個css屬性（圣杯布局中間divpadding-left和padding-right這2個屬性，加上左右兩個div用相對布局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼布局子div里用margin-left和margin-right共2個屬性，6-2=4），個人感覺比圣杯布局思路更直接和簡潔一點。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">
<h4>這是結尾</h4>
</div>
*{
padding: 0;
margin: 0;
}
.header,.footer{
height: 40px;
background: red;
}
.container{
background: #000;
}
.container:after{
display: block;
clear: both;
content: "";
}
.left,.right{
float: left;
width: 200px;
height: 200px;
}
.main{
float: left;
width: 100%;
background: #abcded;
}
.main .layout{
margin: 0 200px;
}
.left{
margin-left: -100%;
background: #666;
}
.right{
margin-left: -200px;
background: #acb;
}
本文章著作權歸黃楚才，轉載須說明來源
