主要為了理解思考的過程，而不是僅僅為了背過一段**。
1負邊距 margin-left為負值，且兩個元素不在一行的時候（可以用元素float:left,width:100%實現）margin-left可以吃掉兄弟元素的margin.
想像一下，假設width:99%，右邊留一條縫隙，當margin-left為負值，即可讓右邊的這條縫隙向左走
即當使用margin左負值，超過自身的寬度時，這個元素在第一行就有位置了。 而margin的負值達到-100%時，恰能達到視窗最左側。。
這個100%為父元素的寬度。同理我們假設要擠的元素寬度為200px,則「擠」200px就可以讓這個元素完全擠到兄弟元素的右邊去。
考慮以下結構 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 &
lt;div id=
"bd">
; <
;div
class
="main">
;<
/div>
; <
;div
class
="left">
;<
/div>
; <
;div
class
="right">
;<
/div>
; <
;/div>
根據我們上面講的，可以這麼寫：
.main
.left
.right
1以上為第一步，可以看到left,right到了正確位置。這時肯定有疑問了？這個main怎麼沒了？因為被擠跑了唄
2 給擠的空間留空
考慮padding屬性，會給元素的邊緣留出緩衝空間，即我人為的留給你空間讓你擠，比如padding:0 200px,左右兩邊留出了200讓你使勁擠。這時候出問題了，因為文件流裡，塊狀元素盒子包括padding啊，如果擠的話整個盒子不就跑了麼。
這時能夠脫離文件流的定位出場了，我無視你，就在你上面的空間擠，然後父元素眼睜睜的看著上面擠，下面留出被遮擋的空間就是了。
這種思路即聖杯布局。（負邊距+定位）
給個空間: 1
#bd1 .
main
1
2
3
4
5
6
7
8
9
10
11
12
13
14 .
left
.right
3.**ued對此的優化
聖杯布局已經挺好了，但是利用了相對定位。如果人為加乙個標籤，來控制上面說的「擠」的空間呢？
完整** 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
<
!doctype
html
>
<
html
lang
="en-us"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
<
/title
>
<
/head
>
<
body
>
<
div id=
"bd"
>
<
div
class
="main"
>
<
div
class
="in"
>
test11111111111
<
/div
>
<
/div
>
<
div
class
="left"
>
test11111111111
<
/div
>
<
div
class
="right"
>
test11111111111
<
/div
>
<
/div
>
<
/body
>
<
/html
>
聖杯布局與雙飛翼布局
聖杯布局和雙飛翼布局都是實現的三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。聖杯布局的出現是來自於a list part上的一篇文章in search of the holy grail。比起雙飛翼布局，它的起源不是源於對頁面...
雙飛翼布局與聖杯布局
中間層100 佔滿同一高度空間的整層寬度，左右兩層被擠出中間層所在區域時，使用margin left的負值將左右層拉回與中間層同一高度的空間 接著調整左右兩層到指定位置 最後使用margin或padding屬性調整中間層被左右層佔住的顯示區。聖杯布局採用乙個父層包含中間 左右三個子層，設定父層的pa...
雙飛翼布局與聖杯布局
怎麼設定min width我還沒搞懂 稍微說明一下 html 中 middle部分首先要放在container的最前部分。然後是left,right 1.將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 2.middle部分 width 100 佔...