聖杯布局和雙飛翼布局的學習總結

最近做響應式網頁時遇到了聖杯布局和雙飛翼布局這兩個概念，它們倆的特點比較相似，都是三個橫向排列的塊元素，但其具有當調整瀏覽器視窗時，左右兩邊的塊元素寬度不變，中間的塊元素寬度自適應的特點。這兩個布局配合flex布局以及bootstrap能達到很好的響應式效果。

以下是對這兩個布局的學習筆記：

我們先來說說聖杯布局吧，實現這個布局的原理很簡單，步驟如下：

1. 首先寫三個div，注意中間的main要先寫在前面。div的樣式就隨便寫吧；

2. 給left和right乙個具體寬度，中間的main寬度定為100%；

3. 讓這三個div向左浮動 (此時的main因為寬度定為100%而獨佔一行，而left和right浮動在第二行，但它們都有向左靠攏的趨勢，現在要做的就是要用定位把left和right挪到第一行左右兩側)；

4. 給left乙個負margin(值為-100%，也就是main的寬度)，此時它被挪到了第一行最左邊；

5. 也給right乙個負margin (值為-apx，其中a為right的寬度)；

此時，三個div都在第一行，實際上main還是獨佔一行，而left和right是壓在main上面的。至此，完成聖杯布局。我們往main中新增滿文本看看，發現兩側內容被left和right擋住了。

而雙飛翼布局就是在聖杯布局的基礎上解決上述問題的乙個布局(聖杯布局2.0嗎？)

其實…就是在main裡面再鑲嵌一層內容層，並且使內容層左右margin為a，b(其中a，b分別為left與right的寬度)，這樣我們再把剛才的文字放到內容層裡，問題就解決了。這就是雙飛翼布局。

通過學習這兩個布局，使我製作響應式網頁又多了一點方法，收穫很大。也希望本文章對讀者有幫助。