原文
大綱
1泛范、三欄布局的引入
2让虐、基本思路及不同實(shí)現(xiàn)方式的區(qū)別
3、布局實(shí)例
3.1敦跌、圣杯布局
3.2澄干、雙飛翼布局
1逛揩、三欄布局的引入
關(guān)于三欄式布局，常規(guī)情況下麸俘，可以使用float實(shí)現(xiàn)辩稽，也可以使用relative來實(shí)現(xiàn)。
但是从媚，如果要求左右兩層定寬逞泄，中間層的寬度隨瀏覽器窗口寬度變化而變化，這種情況下拜效，就適合使用圣杯和雙飛翼布局喷众。通過對圣杯及雙飛翼布局學(xué)習(xí)之后，我認(rèn)為兩種布局的主旨是在html結(jié)構(gòu)中紧憾，使中間的主體層位于左右兩層的前面到千。
圣杯：指的是一種常用的網(wǎng)頁布局，他可以由現(xiàn)有的技術(shù)（無一沒有缺點(diǎn)）來實(shí)現(xiàn)赴穗。所以找到一種最優(yōu)的實(shí)現(xiàn)方法就好像尋找難以捉摸的圣杯一樣憔四。
雙飛翼布局：是一種靈活的布局，始于淘寶UED般眉。如果把三欄布局比作一只大鳥了赵，可以把main看成是鳥的身體，sub和extra則是鳥的翅膀甸赃。這個布局的實(shí)現(xiàn)思路是柿汛，先把最重要的身體部分放好，然后再將翅膀移動到適當(dāng)?shù)牡胤讲憾浴Ｊ菍κケ季值囊环N改良络断。
其實(shí)，圣杯布局和雙飛翼布局都是很早就出現(xiàn)了鸠窗，只是國外大學(xué)生/淘寶UED將其歸納起來妓羊，系統(tǒng)化了胯究。
2稍计、基本思路及不同實(shí)現(xiàn)方式的區(qū)別
2.1、兩種布局的基本構(gòu)思為：首先讓中間層100%寬度占滿同一高度的空間裕循，在左右兩層被擠出中間層所在區(qū)域時臣嚣， 使用margin-left的負(fù)值將左右兩個層拉回與中間層同一高度的空間，接下來調(diào)整左右兩層到指定位置剥哑， 最后使用中間層的margin或padding屬性使中間層的內(nèi)容躲出左右兩層占住的顯示區(qū)硅则。
2.2、兩種布局的主要區(qū)別在于：圣杯布局采用一個父層包含中間株婴、左右三個子層怎虫，設(shè)置父層的padding值騰出左右兩層的顯示區(qū)暑认， 并對左右兩層使用relative和left、right值調(diào)整位置大审；雙飛翼采用中間蘸际、左右三層并列，再在中間層里設(shè)置一個子層徒扶， 設(shè)置中間層子層的margin值騰出左右兩層的顯示區(qū)粮彤，對左右兩層使用margin值即可調(diào)整位置；
3姜骡、布局實(shí)例
3.1导坟、圣杯布局
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#container{
height:200px;
padding: 0px 120px 0 140px;/*騰出寬度,即讓main中的內(nèi)容不會被左右的部分覆蓋*/
background:green;
}
#main{
height:200px;
width: 100%;
position: relative;
background:orange;
float:left;
}
#left{
height:200px;
width: 140px;
margin-left: -100%;/*將left層拉回main層所在高度區(qū)域*/
left: -140px;/*調(diào)整位置*/
position: relative;
background:blue;
float:left;
}
#right{
height:200px;
width: 120px;
margin-left: -120px;/*將right層拉回main層所在高度區(qū)域*/
right: -120px;/*調(diào)整位置*/
position: relative;
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
}
</style>
</head>
<body>
<header>header</header>
<div id="container">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
3.2、雙飛翼布局
<html>
<head>
<title>三欄布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#main{
width: 100%;
height:200px;
position: relative;
float:left;
}
#main-inner{
margin:0 120px 0 140px;/*讓main的內(nèi)容不被左右的內(nèi)容覆蓋*/
background:red;
height:100%;
}
#left{
width: 140px;
height:200px;
margin-left: -100%;/*將left層拉回main層所在高度區(qū)域*/
background:blue;
float:left;
}
#right{
width: 120px;
height:200px;
margin-left: -120px;/*將right層拉回main層所在高度區(qū)域*/
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
clear:both;/*避免因前面的元素浮動而上浮*/
}
</style>
</head>
<body>
<header>header</header>
<div id="main">
<div id="main-inner">min-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
</html>
