CSS佈局經典—聖盃佈局與雙飛翼佈局
在我以前的博客網頁總體佈局徹底剖析—剖完你不進來看一下麼？中總結單列、兩列、三列固寬與變寬佈局，我還覺得已經囊括了全部經典的網頁佈局方法了呢，固然除了CSS3的彈性盒模型沒有涉及到，如今看來確實是本身孤陋寡聞了，之前在看資料的時候無心中看過聖盃佈局和雙飛翼佈局這樣的名詞，只不過當時基礎是在太差直接忽略了（固然如今也是在打基礎，可是好歹相對幾個月前已經有了質的改變）。今天總結時再次看到這兩個佈局方法，固然不再能錯過了。css
聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局（想象一下聖盃是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），聖盃佈局是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點： html
三列布局，中間寬度自適應，兩邊定寬；瀏覽器
中間欄要在瀏覽器中優先展現渲染； 佈局
容許任意列的高度最高；網站
下面咱們看看具體的實現方法。ui
1、聖盃佈局
HTML結構spa
|
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的結構中倒是最靠前的。在實際的網站中這樣作的好處就是用戶可以先看到網頁正文信息，通常網頁兩邊的導航信息和說明信息咱們認爲優先級沒有正文重要。
3d
1.設置一下基本樣式
code
|
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
htm
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
;
}
|
給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，但不用相對佈局了。
參考
-
每一个你不满意的现在，都有一个你没有努力的曾经。