經典佈局之聖盃佈局&雙飛翼佈局
前言
所謂經典，說白了就是古老的東西，但是又是很有用的東西。大多數前端頁面仔包括本菜（不！我可是勵志成為前端工程師的男人，頁面仔太刺耳）都或多或少了解的聖盃佈局和雙飛翼佈局。
本文只對這兩種佈局進行簡單的探討(畢竟本菜真的好菜啊)
不管怎樣，寫作的好處自然很多，可以鞏固自己的知識，弘揚程式猿一貫的樂於分享的精神，也望日後能有溫故而知新的效果。
概述
雖然兩種佈局名稱不一樣，但聖盃佈局和雙飛翼佈局效果是一致的，都是三列布局，都是中間寬度自適應，左右寬度為定值的佈局，且都是讓瀏覽器將中間區塊優先渲染。
效果圖如下：
兩種佈局採用的策略
1. 聖盃佈局:
html結構
<div id="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
1.1 父容器container設定左右margin 以容納左右兩列，container的width不設定，自適應
1.2 三列都設定左浮動，left塊設定width為100%，佔滿父容器寬度；
1.3 然後利用浮動元素設定margin為一定負值時會跳到上一行的特性（注意：如果前面的元素不是浮動元素，負margin是不會起到跳到上一行的效果的），將左邊列的margin-left設定為-100%，也就是父容器的寬度，即center那列的寬度，將right塊的margin-left設定為負的right塊的寬度，比如right塊的寬度為100px,則設定margin-left為-100px；
1.4 設定左邊列和右邊列position為relative，並設定左邊列的left為負的左邊容器留白的寬度，設定右邊列的right為容器右邊留白的寬度
2. 雙飛翼佈局
html結構
<div id="container2">
<div class="center2">
<div class="wrap">center2</div>
</div>
<div class="left2">left2</div>
<div class="right2">right2</div>
</div>2.1 設定container2的width為100%
2.2 設定center2、left2和right2左浮動，center的width為100%；
2.3 設定left2 的margin-left為-100%，right2的margin-left為right2的寬度的負數
2.4 設定wrap 的左右margin分別為left2和right2的寬度，適當留出一點間隙，width不設定為自適應
完整實現程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖盃佈局雙飛翼佈局</title>
<style>
*{
margin: 0;
padding:0;
}
body{
text-align: center;
}
/*聖盃佈局*/
#container{
padding:0 210px;
overflow: hidden;
font-size: 30px;
}
.left,
.center,
.right{
float: left;
}
.center{
width:100%;
height: 50px;
background: blue;
}
.left{
position:relative;
left: -210px;
width:200px;
height: 100px;
margin-left: -100%;
background: red;
}
.right{
position: relative;
right: -210px;
width: 200px;
height: 100px;
margin-left: -200px;
background: green;
}
/*雙飛翼佈局*/
#container2{
width:100%;
}
.left2,
.right2,
.center2{
float: left;
}
.center2{
width:100%;
/*height: 200px;*/
}
.center2 .wrap{
height: 200px;
margin-left: 210px;
margin-right: 210px;
background: #392;
}
.left2{
width:200px;
height: 100px;
background: red;
margin-left: -100%;
}
.right2{
width:200px;
height: 100px;
background: blue;
margin-left: -200px;
}
</style>
</head>
<body>
<h2>聖盃佈局</h2>
<div id="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<br><br>
<h2>雙飛翼佈局</h2>
<div id="container2">
<div class="center2">
<div class="wrap">center2</div>
</div>
<div class="left2">left2</div>
<div class="right2">right2</div>
</div>
</body>
</html>效果：
討論兩種佈局的區別
從html上看，雙飛翼佈局多了一個標籤
從css上看，明顯地雙飛翼佈局的css程式碼更少
而且，聖盃佈局暴露出一個問題：
這個圖為瀏覽器視窗縮小到一定大小的時候，聖盃佈局出現排版錯亂的現象，原因是聖盃佈局的中間那塊寬度是自適應的，瀏覽器縮小到中間的那塊寬度小於左右兩塊時，左邊的那塊margin-left不足以跑到上一行，因此出現了排版錯亂的現象。解決的辦法為container 設定min-width為左右兩塊的寬度較大者。但是，這樣看來，明顯是使用雙飛翼佈局更優。本人推薦用雙飛翼佈局的方式。