雙飛翼佈局和聖盃

聖盃佈局和雙飛翼佈局是前端工程師須要平常掌握的重要佈局方式。二者的功能相同，都是爲了實現一個兩側寬度固定，中間寬度自適應的三欄佈局。

 

聖盃佈局與雙飛翼佈局的優勢：利用佈局，可優先渲染主要部分

• 聖盃佈局：藉助的是其餘非主要元素覆蓋了其父元素的padding值所佔據的寬度，同一個杯子，非主要元素其只是佔據了所有容器的padding值部分；
• 雙飛翼佈局：給主要部分main-wrap添加一個外層元素main，其餘非主要元素所佔據的空間是主要部分(main-wrap)的margin空間，像鳥的兩個翅膀，與主要部分main脫離(main和main-wrap是下面雙飛翼佈局的元素id)。

• 聖盃佈局

  有點：不須要添加dom節點

  缺點：聖盃佈局的缺點：正常狀況下是沒有問題的，可是特殊狀況下就會暴露此方案的弊端，若是將瀏覽器無線放大時，「聖盃」將會「破碎」掉。如圖，當main部分的寬小於left部分時就會發生布局混亂。（main<left即會變形）

   

   

  雙飛翼佈局

  目的：爲了優先顯示中間主要部分，瀏覽器渲染引擎在構建和渲染渲染樹是異步的（誰先構建好誰先顯示），故在編寫時，先構建中間main部分，但因爲佈局緣由，將left置於center左邊，故而出現了雙飛翼佈局。

  優勢：不會像聖盃佈局那樣變形

  缺點是：多加了一層dom節點

   

   

  擴展：定位：像這樣的佈局，也能夠使用定位完成