前言
所謂經(jīng)典转砖，說白了就是古老的東西，但是又是很有用的東西鲸伴。大多數(shù)前端府蔗，還有本菜晋控，都或多或少了解的圣杯布局和雙飛翼布局。
本文只對(duì)這兩種布局進(jìn)行簡單的探討(畢竟本菜真的好菜啊)
不管怎樣姓赤，寫作的好處自然很多赡译，可以鞏固自己的知識(shí)，弘揚(yáng)程序猿一貫的樂于分享的精神不铆，也望日后能有溫故而知新的效果蝌焚。
概述
雖然兩種布局名稱不一樣，但圣杯布局和雙飛翼布局效果是一致的誓斥，都是三列布局综看，都是中間寬度自適應(yīng)，左右寬度為定值的布局岖食，且都是讓瀏覽器將中間區(qū)塊優(yōu)先渲染。
效果圖如下：
兩種布局采用的策略
1. 圣杯布局:
html結(jié)構(gòu)
<div id="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
1.1 父容器container設(shè)置左右margin 以容納左右兩列舞吭，container的width不設(shè)置泡垃，自適應(yīng)
1.2 三列都設(shè)置左浮動(dòng)，center塊設(shè)置width為100%羡鸥，占滿父容器寬度蔑穴；
1.3 然后利用浮動(dòng)元素設(shè)置margin為一定負(fù)值時(shí)會(huì)跳到上一行的特性（注意：如果前面的元素不是浮動(dòng)元素，負(fù)margin是不會(huì)起到跳到上一行的效果的）惧浴，將左邊列的margin-left設(shè)置為-100%存和，也就是父容器的寬度，即center那列的寬度衷旅，將right塊的margin-left設(shè)置為負(fù)的right塊的寬度捐腿，比如right塊的寬度為100px,則設(shè)置margin-left為-100px；
1.4 設(shè)置左邊列和右邊列position為relative柿顶，并設(shè)置左邊列的left為負(fù)的左邊容器留白的寬度茄袖，設(shè)置右邊列的right為容器右邊留白的寬度
2. 雙飛翼布局
html結(jié)構(gòu)
<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 設(shè)置container2的width為100%
2.2 設(shè)置center2、left2和right2左浮動(dòng)嘁锯，center的width為100%宪祥；
2.3 設(shè)置left2 的margin-left為-100%，right2的margin-left為right2的寬度的負(fù)數(shù)
2.4 設(shè)置wrap 的左右margin分別為left2和right2的寬度家乘，適當(dāng)留出一點(diǎn)間隙蝗羊，width不設(shè)置為自適應(yīng)
完整實(shí)現(xiàn)代碼
<!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>
效果：
討論兩種布局的區(qū)別
從html上看，雙飛翼布局多了一個(gè)標(biāo)簽
從css上看仁锯，明顯地雙飛翼布局的css代碼更少
而且耀找，圣杯布局暴露出一個(gè)問題：
這個(gè)圖為瀏覽器窗口縮小到一定大小的時(shí)候，圣杯布局出現(xiàn)排版錯(cuò)亂的現(xiàn)象业崖，原因是圣杯布局的中間那塊寬度是自適應(yīng)的涯呻，瀏覽器縮小到中間的那塊寬度小于左右兩塊時(shí)凉驻，左邊的那塊margin-left不足以跑到上一行，因此出現(xiàn)了排版錯(cuò)亂的現(xiàn)象复罐。解決的辦法為container 設(shè)置min-width為左右兩塊的寬度較大者涝登。但是，這樣看來效诅，明顯是使用雙飛翼布局更優(yōu)胀滚。本人推薦用雙飛翼布局的方式。
