聖杯布局和雙飛翼布局是頁面布局的常用布局方式。兩者都是為了實現兩側寬度固定，中間寬度自適應的三欄布局，但兩者在實現方式上有一定的差別,不過都遵循了以下要點：
實現方式：
三者都設定向左浮動。
設定中間寬度為100%。
設定容器的padding值給左右兩部分留出空間。
左部分：設定margin-left為-100%,定位設定為relative，right設定為width px
右部分：設定margin-right為-width px
header
main
left
right
footer
html,body
.header
.container
.container > div
.main
.left
.right
.footer
header
main
left
right
footer
main包裹了div，這是為了處理margin中內容被遮蓋的問題。
html,body
body
.header
.container
.column
.main
.left
.right
.footer
column設定float，採用負邊距將左、右測部分定外到container的margin留的空白處。
相比聖杯布局，雙飛翼不比設定左右部分的position: relative，也不比設定left、right值，簡單了不少，但聖杯布局的dom結構更加直觀和自然。
flex布局又稱彈性布局，在實現上更簡單和實用。
html,body
.header
.container
.left
.main
.right
.footer
flex: 1這個屬性，使中間部分main可以自適應。 聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯 雙飛翼布局
自己雖然經歷著web應用的開發,總是拿著別人寫好的css來引用到自己的專案當中,甚至一度迷上了bootstrap,發現有了它自己可以不用在寫程式邏輯的同時還要去修改別人的css.當然開發的應用大多數是企業內部應用,個別網際網路的程式.2016偶然的機會接觸到前端這個概念,發現自己還是挺喜歡前端的這些...