摘要：奇妙的圣杯與雙飛翼相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。他往前移動之后，文檔流也會跟著移動元素寬度負邊距負邊距可以增加元素的寬度，對于沒有的元素，負邊距可以加寬他們。

[TOC]

沒錯，題目就是模仿《那些年，我們一起清除過的浮動》而來的。

相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。關于取名無非是覺得長得像圣杯，或者是長得像小鳥。至于其中的區別也只有一小點，其中主要的思想可謂是基本一致！

這兩個布局要實現的樣式都是下面的這種形式：

也就是中間的那一部分，長得像圣杯或者是飛翔的小鳥，left 和 right 寬度已知，中間自適應填充。一般情況下，如果這樣寫代碼，顯然是很好實現布局的。

head
    

        
left
        
main
        
right
    
 
foot

但是相應的按照 DOM 的加載順序，content 部分依次會加載 left、main、right。這對于有潔癖的人可能是無法忍受的，甚至是覺得不符合常理。

正常情況下，我們希望先加載的是主要部分，然后再開始加載 left 和 right 兩個相對來說不是很重要的東西。所以 HTML 代碼應該這樣寫：

head
    

        
main
        
left
        
right
    
foot

另外一方面來說，我們倡導語義化的 HTML，也就是說在編寫 HTML 的時候不應該受制于 CSS 的干擾，所以這樣的寫法來達到上面的布局也應該是必要的。

那么如果這樣寫應該如何去寫 CSS 樣式呢？

首先我們的想法可能是先搭建起 head content 和 foot，content 里面的東西全部用左浮動解決，對 content 要清除浮動讓他撐起高度。代碼如下：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}
.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
}
.main {
    background-color: crimson;
}

這樣的話就能實現下面的布局：

我們要的目的是 main 布局自適應，這樣的話我們給 main 100% 的寬度：

.main {
  100%;
}

這樣的話布局就會變成這樣：

接下來，我們想要 left 跑上去，這個時候就可以使用奇妙的負邊距了。

main, left, right 我們都可以看做是在一個浮動流中，依次的順序也是 main left right。目前是因為 main 占了100% 從而導致 left 與 right 不能和 main 浮在同一行了，這個時候我們可以利用負邊距來讓 left 向前移動 （即 margin-left 為正的時候就是和左邊的盒子的外邊距，那么為負的時候就是像前移動了）。加上下面的特技

.left {
    margin-left: 100%;
}

那么移動多少呢？為了讓 left 跑到最左邊，那么就像上面的一樣移動到 -100% ，也就是向左移動的最大值了。這樣，會得到下面的布局：

我們看到 left 移動到最左邊了，那 right 是不是也可以模仿 left 一起移動呢？移動多少？right 只需要向前移動right的寬度個距離，即 60px

.right {
    margin-left: -60px;
}

得到下面的結果

和我們想象中的一樣， right 也移動上去了，并且跑到了我們想要的位置。

但是稍微細心點就能發現上面的結果還是存在問題的，紅色中間部分的 main 跑到哪里去了？

打開開發者工具審查元素就能看見好像是 left 和 right 覆蓋到上面去了。

那么如何去使得 main 部分往里面收收呢？這也就是圣馬布局與雙飛翼布局根本區別了

圣杯布局的思想就是給包裹著三個元素的 content 加一個 padding, 讓 padding-left 和 padding-right 的數值是 left 和 right 的寬度，然后利用相對定位把他們再移動在兩旁。

首先，給 content padding

.content {
    padding: 0 60px 0 40px;
}

然后利用相對定位移動 left 和 right

.left {
    position: relative;
    left: -40px;
}
.right {
    position: relative;
    right: -60px;
}

這樣也就完美的解決了問題：

最后 CSS 的所有樣式是這樣的：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}
.content {
    padding: 0 60px 0 40px;
}

.left {
    position: relative;
    left: -40px;
}
.right {
    position: relative;
    right: -60px;
}

HTML 是這樣的：

head
    

        
main
        
left
        
right
    
foot

延續到上面的情況，圣馬布局是這樣做的

圣馬布局的思想就是給包裹著三個元素的 content 加一個 padding, 讓 padding-left 和 padding-right 的數值是 left 和 right 的寬度，然后利用相對定位把他們再移動在兩旁。

而雙飛翼布局是在 main 里面再添加一個 div, 然后對這個 div 進行 margin-left 和 margin-right. 即

head
    

        

            
main
        
        
left
        
right
    
foot

CSS 部分對 wrap 進行處理：

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}

最后我們的CSS代碼是這樣的：

* {
    margin: 0;
    padding: 0;
}
.cleanfix {
    clear: both;
}
.cleanfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
    zoom: 1;
}
.head, .foot {
    width: 100%;
    height: 80px;
}
.head {
    background-color: #4eb5f7;
}
.foot {
    background-color: #999999;
}

.left, .right, .main {
    float: left;
}
.left {
    width: 40px;
    height: 60px;
    background-color: #B9E078;
    margin-left: -100%;
}
.right {
    width: 60px;
    height: 80px;
    background-color: #FF9900;
    margin-left: -60px;
}
.main {
    background-color: crimson;
    width: 100%;
}

.wrap {
    background-color: darkmagenta;
    margin-left: 40px;
    margin-right: 60px;
}

總結一下，圣馬布局和雙飛翼的流程大體上是這樣的

搭建 head content foot, content 內部的三個元素全部左浮動，然后清除浮動防止影響 foot

給 main 100% 的寬度讓他占滿一行

給 left -100% 的margin-left 讓他移動到最左邊，給 right 和他寬度一樣的負 margin 讓他移動到最右邊

針對移動后 main 的兩邊會被 left 和 right 重合覆蓋掉做出不同的改變，這兒也就是兩個布局的本質區別

圣杯布局會給 content 內邊距，左右分別為 left 和 right的寬度，然后再利用相對定位移動 left 和 right

雙飛翼布局會在 main 里面再加一層 wrap ，然后把內容都寫在 wrap 里面，正對 wrap 設置他的 margin, 左右外邊距和 left 與 right 一樣

相信在上面的圣馬布局與雙飛翼布局中已經見識到了負邊距的奇妙之處了，這就是他的第一奇妙之處

整個浮動可以看是有一個浮動流的存在，利用負邊距可以讓他在這個流中移動，并且會疊加到相應元素的上面

普通元素的位置是相對于文檔流而發生變化的。負邊距也會使元素在文檔流中發生位移。不同于相對定位的是，這些元素移動之后不會占據原來的空間。他往前移動之后，文檔流也會跟著移動

負邊距可以增加元素的寬度，對于沒有 width 的元素，負邊距可以加寬他們。

這樣就能夠很好的利用負邊距實現 一寸照片排列 的那種難題了。對于這種問題，比較麻煩的辦法是浮動之后 margin-right, 然后對每一行的最后一個元素設置 margin-right: 0。這樣就存在一個如何給最后一個元素設定這個margin-right的問題了。

利用負邊距，我們可以加大子元素的margin, 然后浮動里面所有的元素，等他們都浮動起來的時候利用 overflow: hidden消除最右邊的邊距。

絕對定位就是相對于父親系元素的最近的一個定位元素的邊界來決定的，這個邊界也就是margin。

如果是負邊距的話就能機智的實現元素垂直水平居中了

.con {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%
    margin-left: -50px;
    margin-top: -50px;
}

CSS布局奇淫巧計之-強大的負邊距

CSS布局中圣杯布局與雙飛翼布局的實現思路差異在哪?-知乎

https://github.com/rccoder/blog/issues/6

歡迎 start 與 watch