作為前端開發者，布局都應該已經寫了不少了，但很多時候我們實現布局的思路可能都不一定正確或者不是最合適的。要想自己的布局水平有所提高，兩個經典的布局： 聖杯布局 和 雙飛翼布局，我個人覺得還是很有必要掌握的。
聖杯布局和雙飛翼布局都是為了實現一種非常常見的布局：即兩側定寬，中間自適應的三列布局，特徵是中間列要放在文件流前面以優先渲染。
既然都是為了解決同乙個問題，那麼有哪些不同呢？我們先來稍微回顧一下這兩種布局，再加以比較。
聖杯布局的來歷是2023年發在a list part上的這篇文章：
html 部分：
id="container">
id="main"
class="col"> #main
id="left"
class="col"> #left
id="right"
class="col"> #right
div>
css 部分：
#container
.col
#main
#left
#right
雙飛翼布局的概念始於**ued，據說是玉伯提出的（網上看到的，未求證）。意思是：如果把三列布局比作乙隻大鳥，可以把中間的主列看成是鳥的身體，左右則是鳥的翅膀。這個布局的實現思路是，先把最重要的身體部分放好，然後再將翅膀移動到適當的地方。
html 部分：
class="col">
id="main"> #main
div>
id="left"
class="col"> #left
id="right"
class="col"> #right
css 部分：
.col
#main
#left
#right
聖杯布局
雙飛翼布局
其實，實現這種經典的三列布局，還有另外兩種思路：一種是聖杯布局的變種 —— 改用絕對定位來實現，一種是使用 flex 布局來實現。有興趣的可以自己嘗試下，這裡我也簡單的做出對比：
絕對定位
flex 布局
總的來看，網頁布局技巧不外乎：浮動、絕對定位 / 相對定位、負邊距、flex 布局。能把這幾個靈活的搭配用到一起，大部分的布局一般就都能實現了。選用最合適的方法來布局，不僅能幫你節省很多時間，還能提公升不少頁面的載入效能。
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...