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

[TOC]

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

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

這兩個布局要實現(xiàn)的樣式都是下面的這種形式：

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

head
    

        
left
        
main
        
right
    
 
foot

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

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

head
    

        
main
        
left
        
right
    
foot

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

那么如果這樣寫應(yīng)該如何去寫 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;
}

這樣的話就能實現(xiàn)下面的布局：

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

.main {
  100%;
}

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

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

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

.left {
    margin-left: 100%;
}

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

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

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

得到下面的結(jié)果

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

但是稍微細(xì)心點就能發(fā)現(xiàn)上面的結(jié)果還是存在問題的，紅色中間部分的 main 跑到哪里去了？

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

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

圣杯布局的思想就是給包裹著三個元素的 content 加一個 padding, 讓 padding-left 和 padding-right 的數(shù)值是 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

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

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

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

head
    

        

            
main
        
        
left
        
right
    
foot

CSS 部分對 wrap 進(jìn)行處理：

.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果是負(fù)邊距的話就能機(jī)智的實現(xiàn)元素垂直水平居中了

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

CSS布局奇淫巧計之-強大的負(fù)邊距

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

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

歡迎 start 與 watch