幾年前的聖盃佈局和雙飛翼佈局/IE6雙margin

解決ie6  浮動block元素雙margin

display:inline能夠解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。而後，float:left等浮動屬性能夠讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性同樣，支持高寬，垂直margin和padding等。

 

聖盃佈局與雙飛翼佈局

它們實現的都是三欄佈局，兩邊的盒子寬度固定，中間盒子自適應，也就是咱們常說的固比固佈局

聖盃佈局

1. 讓左中右顯示在一行上，左右固定寬度，中間百分百寬度，html先寫中間部分，三塊都浮動，給左邊margin賦值  【-100%】，讓它處於最左側且於中間部分同一行，此時右塊部分處於第二行最左邊，佔據了左塊的位置。
2. 給右塊賦值margin 【-200px】(它自身的寬度)讓它處於右邊，與其餘同在一行（float就是把全部塊放在一行放不下才排在第二行，float的block元素不加寬度會表現的如inline元素，寬度由內容撐開）
3. 此時左右兩塊，都蓋住了中間塊的部分寬度，因此給父塊加padding-left, padding-right.值爲左右塊的寬度，再給左右塊分別設置相對定位，讓他們偏移出中間塊的位置。此時左右塊分別佔據最左最右固定寬度，中間塊是自適應寬度，完畢。

 

雙飛翼佈局

1. 同聖盃佈局a
2. 同聖盃佈局b
3. 此時是給中間塊添加一個子塊，子塊添加margin-left，margin-right，此後中間自適應部分的內容都寫在中間塊的字塊中。

二者的差別：

聖盃佈局的實際顯示內容的三列是有共同的父元素，因此須要給父元素添加padding，也須要給左右塊添加相對定位的偏移。

而雙飛翼的實際顯示內容的三列是左右兩列以及中間塊的子塊，因此須要給子塊加margin。也就是說左右兩塊仍然改在中間塊的上面，只是與中間塊的子塊顯示爲三列布局。（給子塊加padding，不太好，由於背景會顯示在padding區域）