所謂經典，說白了就是古老的東西，但是又是很有用的東西。大多數前端頁面仔包括本菜（不！我可是勵志成為前端工程師的男人，頁面仔太刺耳）都或多或少了解的聖杯布局和雙飛翼布局。
本文只對這兩種布局進行簡單的**(畢竟本菜真的好菜啊)
不管怎樣，寫作的好處自然很多，可以鞏固自己的知識，弘揚程式猿一貫的樂於分享的精神，也望日後能有溫故而知新的效果。
雖然兩種布局名稱不一樣，但聖杯布局和雙飛翼布局效果是一致的，都是三列布局，都是中間寬度自適應，左右寬度為定值的布局，且都是讓瀏覽器將中間區塊優先渲染。
效果圖如下：
html結構
id="container">
class="center">centerdiv>
class="left">leftdiv>
class="right">rightdiv>
div>
1.1 父容器container設定左右margin 以容納左右兩列，container的width不設定，自適應
1.2 三列都設定左浮動，left塊設定width為100%，佔滿父容器寬度；
1.3 然後利用浮動元素設定margin為一定負值時會跳到上一行的特性（注意：如果前面的元素不是浮動元素，負margin是不會起到跳到上一行的效果的），將左邊列的margin-left設定為-100%，也就是父容器的寬度，即center那列的寬度，將right塊的margin-left設定為負的right塊的寬度，比如right塊的寬度為100px,則設定margin-left為-100px；
1.4 設定左邊列和右邊列position為relative，並設定左邊列的left為負的左邊容器留白的寬度，設定右邊列的right為容器右邊留白的寬度
html結構
id="container2">
class="center2">
class="wrap">center2div>
div>
class="left2">left2div>
class="right2">right2div>
div>
2.1 設定container2的width為100%
2.2 設定center2、left2和right2左浮動，center的width為100%；
2.3 設定left2 的margin-left為-100%，right2的margin-left為right2的寬度的負數
2.4 設定wrap 的左右margin分別為left2和right2的寬度，適當留出一點間隙，width不設定為自適應
lang="en">
charset="utf-8">
聖杯布局雙飛翼布局title>
* body
/*聖杯布局*/
#container
.left,
.center,
.right
.center
.left
.right
/*雙飛翼布局*/
#container2
.left2,
.right2,
.center2
.center2
.center2
.wrap
.left2
.right2
style>
head>
id="container">
class="center">centerdiv>
class="left">leftdiv>
class="right">rightdiv>
div>
id="container2">
class="center2">
class="wrap">center2div>
div>
class="left2">left2div>
class="right2">right2div>
div>
body>
html>效果：
從html上看，雙飛翼布局多了乙個標籤
從css上看，明顯地雙飛翼布局的css**更少
而且，聖杯布局暴露出乙個問題：
這個圖為瀏覽器視窗縮小到一定大小的時候，聖杯布局出現排版錯亂的現象，原因是聖杯布局的中間那塊寬度是自適應的，瀏覽器縮小到中間的那塊寬度小於左右兩塊時，左邊的那塊margin-left不足以跑到上一行，因此出現了排版錯亂的現象。解決的辦法為container 設定min-width為左右兩塊的寬度較大者。但是，這樣看來，明顯是使用雙飛翼布局更優。本人推薦用雙飛翼布局的方式。
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
css經典布局 聖杯布局 雙飛翼布局 經典寫法
我第一次聽到這兩個布局的時候以為這是兩個不一樣的布局，但我現在覺得他倆是一樣的，就是左右兩欄等寬，中間自適應的布局，沒有flex的時候想要實現自適應就需要用一些獨特的方法，也就是我今天介紹的經典寫法。當然如今實現左右兩欄等寬，中間自適應已經很方便啦。後邊我會補一種用flex實現的方法 html部分 ...