第1天 聖杯布局和雙飛翼布局的理解和區別，並用**實現
1、聖杯布局
浮動、負邊距、相對定位、不新增額外標籤
效果圖
dom結構：
class
="header"
>
headerp
>
class
="bd"
>
class
="main"
>
mainp
>
class
="left"
>
leftp
>
class
="right"
>
right
p>
p>
class
="footer"
>
footerp
>
2、把左層負margin150後，發現left上去了，因為負到出視窗沒位置了，只能往上挪
3、那麼按第二步這個方法，可以得出它只要挪動視窗寬度那麼寬就能到最左邊了，利用負邊距，把左右欄定位
4、然而問題來了，中間被左右擋住了啊，只好給外層加padding了
5、但是加了之後左右欄也縮進來了，於是採用相對定位方法，各自相對於自己把自己挪出去，得到最終結果
2、雙飛翼布局在不增加額外標籤的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以後布局是有侷限性的，而且寬度控制要改的地方也多，那麼有沒其他方法更加簡潔方便呢？
在**ued**下，增加多乙個p就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。
dom結構：main內層增加了乙個p
class
="header"
>
headerp
>
class
="bd"
>
class
="main"
>
class
="inner"
>
main p
>
* p
>
class
="left"
>
leftp
>
class
="right"
>
right p
>
p>
class
="footer"
>
footerp
>
去掉了左右欄的相對定位
去掉包裹層padding，以中間欄新增p的margin代替
body
.header,.footer
.bd.left
.main
.right
.inner
{margin-left
:150px;
margin-right
:190px;
不同在於解決中間欄p內容不被遮擋問題的思路不一樣。
聖杯布局
雙飛翼布局
多了1個p，少用4個css屬性（聖杯布局中間pp的adding-left和padding-right這2個屬性，加上左右兩個p用相對布局position: relative及對應的right和left共4個屬性，一共6個；而雙飛翼布局子p裡用margin-left和margin-right共2個屬性，6-2=4）。
並且雙飛翼布局還有個好處，讓main變成bfc元素了，螢幕寬度縮小main也不會被擠下去，聖杯布局就會被擠下去。
聖杯布局和雙飛翼布局
雙飛翼布局和聖杯布局其實是我們經常會在 中看到的經典的三欄式布局，即中間是主要內容main content，然後是左邊側欄，一般是 的分類資訊，右邊欄就是一些附屬功能，最典型的例子就是 和京東。main main son left right 上面就是雙飛翼布局的html 結構非常清晰，分為main...
聖杯布局和雙飛翼布局
一 聖杯布局 重點 content的padding，left的margin left和left值，right的margin left和right值 lang en charset utf 8 聖杯布局title header content content main content left,con...
聖杯布局和雙飛翼布局
聖杯布局 title style type text css body 2.設定container的樣式 container 3.設定middle left right的公用樣式 middle,left,right 4.設定middle的樣式 middle 5.設定left的樣式 left 6.設定...