聖盃佈局與雙飛翼佈局
1、CSS包含3種基本的佈局模型，用英文歸納爲：Flow、Layer 和 Float。
在網頁中，元素有三種佈局模型：
一、流動模型（Flow）css
-
流動模型是默認的網頁佈局模式。html
-
在流動模型下，內聯元素都會在所處的包含元素內從左到右按順序水平分佈顯示。瀏覽器
- 在流動模型下，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，在默認狀態下，塊狀元素的寬度都爲100%。
二、浮動模型 （Float）float:right/left/none;佈局
- 任何元素在默認狀況下是不能浮動的，但能夠用 CSS 定義爲浮動
三、層模型（layer）絕對定位position: absolute； 相對定位position: relative； 固定定位position: fixed；post
- 對每一個圖層可以精肯定位操做
解釋網站
- absolute：若是想爲元素設置層模型中的絕對定位，須要設置position:absolute(表示絕對定位)，這條語句的做用將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。若是不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。
- relative：若是想爲元素設置層模型中的相對定位，須要設置position:relative（表示相對定位），它經過left、right、top、bottom屬性肯定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(而且元素像層同樣浮動了起來)，而後相對於之前的位置移動，移動的方向和幅度由left、right、top、bottom屬性肯定，偏移前的位置保留不動。
- fixed：表示固定定位，與absolute定位類型相似，但它的相對移動的座標是視圖（屏幕內的網頁窗口）自己。因爲視圖自己是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。
CSS佈局經典—聖盃佈局與雙飛翼佈局
聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局（想象一下聖盃是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），聖盃佈局是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點： ui
-
三列布局，中間寬度自適應，兩邊定寬；url
-
中間欄要在瀏覽器中優先展現渲染； spa
-
容許任意列的高度最高；3d
下面咱們看看具體的實現方法。
1、聖盃佈局
HTML結構
|
1
2
3
4
5
6
7
|
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
|
由於須要中間欄優先展現渲染，因此中間的main在HTML的結構中倒是最靠前的。在實際的網站中這樣作的好處就是用戶可以先看到網頁正文信息，通常網頁兩邊的導航信息和說明信息咱們認爲優先級沒有正文重要。
1.設置一下基本樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.left,.main,.right{
min-height: 130px;
}
.container{
border:2px solid yellow;
}
.left{
width:200px;
background:red;
}
.right{
width:220px;
background:green;
}
.main{
background:blue;
}
|
爲了高度保持一致給left middle right都加上min-height:130px
2.將主體部分的三個子元素都設置左浮動
|
1
2
3
|
.left,.main,.right{
float: left;
}
|
此時的頁面顯示如圖所示，Shen Me Gui不要緊，事情會變得好起來的
咱們看一下上面的效果比較明顯的兩個問題，一是footer跑到上面去了，二是container容器高度塌陷了，這是典型的「清除浮動和閉合浮動」問題。
3.解決浮動問題
|
1
2
3
4
5
6
7
|
.container{
border: 2px solid yellow;
overflow: hidden; /*閉合浮動*/
}
.footer{
clear: both; /*清楚浮動*/
}
[附]清浮動經常使用的方法
.clearfix:after{
content:"";
display:block;
clear:both
}
.clearfix{
*zoom:1; /*解決兼容性問題*/
}
|
給container加上overflow:hidden觸發BFC閉合浮動，給footer加上clear屬性清除浮動。
咱們發現footer移到了下面，而且container的高度塌陷也修復了。
4.設置main寬度爲width:100%,讓其單獨佔滿一行
|
1
2
3
4
|
.main{
width
:
100%
;
background
:
blue
;
}
|
5.設置left和right負的外邊距
咱們的目標是讓left、main、right依次並排，可是上圖中left和right都是位於下一行，這裏的技巧就是使用負的margin-left:
|
1
2
3
4
5
6
7
8
9
10
|
.
left
{
margin-left
:
-100%
;
width
:
200px
;
background
:
red
;
}
.
right
{
margin-left
:
-220px
;
width
:
220px
;
background
:
green
;
}
|
負的margin-left會讓元素沿文檔流向左移動，若是負的數值比較大就會一直移動到上一行。關於負的margin的應用也是博大精深，這裏確定是不能詳細介紹了。
設置left部分的margin-left爲-100%,就會使left向左移動一整個行的寬度，因爲left左邊是父元素的邊框，因此left繼續跳到上一行左移，一直移動到上一行的開頭，並覆蓋了main部分（仔細觀察下圖，你會發現main裏面的字「main」不見了，由於被left遮住了），left上移事後，right就會處於上一行的開頭位置，這是再設置right部分margin-left爲負的寬度，right就會左移到上一行的末尾。
6.修復覆蓋問題
第五步咱們說過設置left和right負的外邊距覆蓋了main部分的內容，如今想辦法修復這個問題，首先給container的左右加上一個內邊距，分別爲left和right的寬度。
|
1
2
3
4
5
|
.container{
border
:
2px
solid
yellow;
padding
:
0
220px
0
200px
;
overflow
:
hidden
;
}
|
因爲left、main、right三個部分都被container包裹着，因此給其添加內邊距，三個子元素會往中間擠。貌似仍是沒有修復問題，彆着急，咱們已經在container的左右兩邊留下了相應寬度的留白，只要把left和right分別移動到這兩個留白就能夠了。可使用相對定位移動left和right部分，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.
left
,.main,.
right
{
position
:
relative
;
float
:
left
;
min-height
:
130px
;
}
.
left
{
margin-left
:
-100%
;
left
:
-200px
;
width
:
200px
;
background
:
red
;
}
.
right
{
margin-left
:
-220px
;
right
:
-220px
;
width
:
220px
;
background
:
green
;
}
|
至此，咱們完成了三列中間自適應的佈局，也就是傳說中的聖盃佈局。完整的代碼以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>聖盃佈局</
title
>
<
style
type
=
"text/css"
>
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.left,
.main,
.right{
position: relative;
float: left;
min-height: 130px;
}
.container{
border: 2px solid yellow;
padding:0 220px 0 200px;
overflow: hidden;
}
.left{
margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
.right{
margin-left: -220px;
right: -220px;
width: 220px;
background: green;
}
.main{
width: 100%;
background: blue;
}
.footer{
clear: both;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"header"
>header</
div
>
<
div
class
=
"container"
>
<
div
class
=
"main"
>main</
div
>
<
div
class
=
"left"
>left</
div
>
<
div
class
=
"right"
>right</
div
>
</
div
>
<
div
class
=
"footer"
>footer</
div
>
</
body
>
</
html
>
|
2、雙飛翼佈局
聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局。不一樣在於解決」中間欄div內容不被遮擋「問題的思路不同。
HTML 結構
|
1
2
3
4
5
6
7
8
9
|
<
div
class
=
"header"
>header</
div
>
<
div
class
=
"container"
>
<
div
class
=
"main"
>
<
div
class
=
"content"
>main</
div
>
</
div
>
<
div
class
=
"left"
>left</
div
>
<
div
class
=
"right"
>right</
div
>
</
div
>
<
div
class
=
"footer"
>footer</
div
>
|
雙飛翼佈局的前五步和聖盃佈局徹底相同，咱們只須要修改第六步，前面是設置container的內邊距以及相對定位來解決這個覆蓋問題的，雙飛翼佈局中，爲了main內容不被遮擋，在main裏面添加一個子元素content來顯示內容，而後設置content的margin-left和margin-right爲左右兩欄div留出位置。
直接貼出代碼，讀者能夠自行參透他們的異同：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>聖盃佈局</
title
>
<
style
type
=
"text/css"
>
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,
.footer{
border: 1px solid #333;
background: #aaa;
text-align: center;
}
.left,
.main,
.right{
float: left;
min-height: 130px;
}
.container{
border: 2px solid yellow;
overflow: hidden;
}
.left{
margin-left: -100%;
width: 200px;
background: red;
}
.right{
margin-left: -220px;
width: 220px;
background: green;
}
.main{
width: 100%;
background: blue;
}
.content{
margin: 0 220px 0 200px;
}
.footer{
clear: both;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"header"
>header</
div
>
<
div
class
=
"container"
>
<
div
class
=
"main"
>
<
div
class
=
"content"
>main</
div
>
</
div
>
<
div
class
=
"left"
>left</
div
>
<
div
class
=
"right"
>right</
div
>
</
div
>
<
div
class
=
"footer"
>footer</
div
>
</
body
>
</
html
>
|
雙飛翼佈局比聖盃佈局多使用了1個div，少用大體4個css屬性（聖盃佈局container的 padding-left和padding-right這2個屬性，加上左右兩個div用相對佈局position: relative及對應的right和left共4個屬性，；而雙飛翼佈局子div裏用margin-left和margin-right共2個屬性，比聖盃佈局思路更直接和簡潔一點。簡單提及來就是」雙飛翼佈局比聖盃佈局多建立了一個div，但不用相對佈局了。
-
每一个你不满意的现在，都有一个你没有努力的曾经。