聖杯布局與雙飛翼布局

聖杯布局和雙飛翼布局都是實現的三欄布局，兩邊的盒子寬度固定，中間盒子自適應，也就是我們常說的固比固布局。它們實現的效果是一樣的，差別在於其實現的思想。

聖杯布局的出現是來自於a list part上的一篇文章in search of the holy grail。比起雙飛翼布局，它的起源不是源於對頁面的形象表達。在西方，聖杯是表達「渴求之物」的意思。而雙飛翼布局，源與**的ued。

通過縮放頁面就可以發現，隨著頁面的寬度的變化，這三欄布局是中間盒子優先渲染，兩邊的盒子框子固定不變，即使頁面寬度變小，也不影響我們的瀏覽。

注意：當縮放頁面的時候，寬度不能小於700px，為了安全起見，最好還是給body加乙個最小寬度!

整體html結構**如下：

header內容區h4>

header>
class="container">
class="middle">
中間彈性區h4>
div>
class="left">
左邊欄h4>
div>
class="right">
右邊欄h4>
div>
div>
footer內容區h4>
footer>注意：上述**，父元素的的三欄務必先寫中間盒子。因為中間盒子是要被優先渲染，並且設定其自適應，也就是width:100%。
每個盒子的css樣式如下：
header
.container
.middle
.left
.right
footer

三欄並沒有在父元素的一行顯示，就是因為中間盒子給了百分之百的寬度，左右兩個盒子才會被擠下來。

如果中間盒子不是100%的寬度，按照文件流，左邊的盒子一定會在中間盒子的後面顯示，接著顯示右邊的盒子。但是現在中間盒子是滿屏了的，所以左右兩個盒子被擠到下一行顯示。

1）讓左邊的盒子上去，設定其左邊距為負的中間盒子的寬度，也就是.left 。這樣左盒子才可以往最左邊移動。

2）讓右邊的盒子上去，設定其左邊距為負的自己的寬度，也就是.right 。這樣右盒子才可以在一行的最右邊顯示出自己。

利用父級元素設定左右內邊距的值，把父級的三個子盒子往中間擠。**如下：.container 這裡的200px是左右盒子的寬度。

左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓著。

給左右兩個盒子加乙個定位，加了定位之後左右兩個盒子就可以設定left和right值。

**如下：

聖杯布局終於搞定了，也實現了我們要的效果，左右側的盒子固定，中間盒子自適應，而且中間盒子的內容完全不受影響。

聖杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文件流前面以優先渲染。

兩種方法基本思路都相同：

1）首先讓中間盒子 100% 寬度佔滿同一高度的空間

2）在左右兩個盒子被擠出中間盒子所在區域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。

3）接下來進行一些調整避免中間盒子的內容被左右盒子遮擋。

主要區別在於如何使中間盒子的內容不被左右盒子遮擋：

聖杯布局的方法：設定父盒子的 padding 值為左右盒子留出空位，再利用相對布局對左右盒子調整位置佔據 padding 出來的空位；

雙飛翼布局的方法：在中間盒子裡再增加乙個子盒子，直接設定這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。

簡單說起來就是雙飛翼布局比聖杯布局多建立了乙個div，但不用相對布局了，少設定幾個屬性。

雙飛翼布局與聖杯布局

中間層100 佔滿同一高度空間的整層寬度，左右兩層被擠出中間層所在區域時，使用margin left的負值將左右層拉回與中間層同一高度的空間 接著調整左右兩層到指定位置 最後使用margin或padding屬性調整中間層被左右層佔住的顯示區。聖杯布局採用乙個父層包含中間 左右三個子層，設定父層的pa...

雙飛翼布局與聖杯布局

怎麼設定min width我還沒搞懂 稍微說明一下 html 中 middle部分首先要放在container的最前部分。然後是left,right 1.將三者都 float left 再加上乙個position relative 因為相對定位後面會用到 2.middle部分 width 100 佔...

聖杯布局與雙飛翼布局

聖杯布局和雙飛翼布局都是兩邊固定，中間內容自適應，當中列要完全顯示，中間列要優先載入 聖杯布局首先要用float搭建完整的布局框架，讓middle，left，right都浮動，給left設定乙個margin left 100 此時left區域上去並靠左，給right設定乙個margin left 2...