聖盃佈局？雙飛翼佈局？

如今寫樣式各類 flex 有沒？不去兼容ie家族至關的爽有沒？react vue angular 各類用，不再用繁瑣的操做dom 有沒有？的確，隨着前端的發展，如今寫代碼不多去兼容那個噁心的ie 6 7 8 了，可是難免有些項目好比銀行政府等項目，後臺系統等仍是要考慮ie 的兼容，記得幾年前面試時候面試官很容易問的就是實現一個左側固定，右側自適應的佈局，或者讓你寫個聖盃佈局，雙飛翼布。剛開始聽到這兩個詞你會以爲頗有意思，因此就再來溫習下着兩個。

聖盃佈局

html 結構

結構很簡單，分爲一個頭部，一個底部，中間內容區域又分爲左側，主要內容區和右側。 下面簡單的增長下樣式

咱們看下渲染的樣式

第一步

將 main left right 所有左浮動,container 設置overflow:hidden 出發BFC

第二步

設置main 的寬度爲100%

.main{width:100%}
複製代碼

第三步

設置left和right負margin-left值

-100% 會讓left 向左移動100% 父行寬距離，同時right 會移到最左側，而後設置right的margin-left 等於-200px， right 便會移動到上一行的末尾。

可是你會發現main 中的文字不見了，緣由是被left 遮擋了，如今main 的內容區是100% 父元素寬的，怎麼讓main 不被遮擋呢？

第四步

解決中間欄被遮擋問題 給container 增長左右padding 同時把left 和 right 定位到相應位置

.container{padding:0 200px;}
複製代碼

.left{position:relative;left:-200px;}
.right{position:relative;right:-200px;}
複製代碼

到此，咱們的聖盃佈局就完成了。

雙飛翼佈局

雙飛翼佈局和聖盃佈局的前3步都是同樣的，區別在於第四步（解決中間欄不被遮擋的問題），下面看下聖盃佈局的實現。

雙飛翼佈局的html 結構發生了一點變化

如圖，能夠看到雙飛翼佈局把中間層又包了一層

.content{margin:0 200px;}
複製代碼

雙飛翼佈局沒有了container 的padding 和 left right 的定位，用一個content 層的左右margin 值來解決中間內容區被遮擋的問題。

總結

聖盃佈局和雙飛翼佈局都把中間列放到前面，實現了主要內容優先加載，而且都兼容ie6以上。我的以爲雙飛翼佈局好一點，相信你在工做中確定碰見過這樣的佈局，不知道你是怎麼實現的呢？本文若有不正確之處，歡迎留言指正。