三欄佈局 margin負值 聖盃模型

 1. 基於傳統的position和margin等屬性進行佈局

   絕對定位法，聖盃佈局，自身浮動法。

 1).絕對定位法

    絕對定位法原理是將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們上面，而後使用margin屬性，留出左右元素的寬度，既可使中間元素自適應屏幕寬度。該法佈局的好處，三個div順序能夠任意改變。不足是 由於絕對定位，因此若是頁面上還有其餘內容，top的值須要當心處理，最好可以對css樣式進行一個初始化，就像在上面例子中加了一個標題，若是不對樣式進行初始化，則兩邊和中間的值會對不齊。 另外，隨着瀏覽器窗口縮小，小於200px的時候，會發生壓縮。

 

 2).使用自身浮動法

    自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。該佈局法的好處是受外界影響小，可是不足是 三個元素的順序，center必定要放在最後，這是和絕對定位不同的地方，center佔據文檔流位置，因此必定要放在最後，左右兩個元素位置沒有關係。當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。

 3). 聖盃佈局（雙飛翼）

   聖盃佈局的原理是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div，包含div須要設置float屬性使其造成一個BFC，並設置寬度，而且這個寬度要和left塊的margin負值進行配合。這裏對聖盃佈局解釋特別詳細。  要和left塊的margin負值進行配合，具體原理。這裏對聖盃佈局解釋特別詳細。該方法在網站佈局中很是常見，也是面試常考點，優勢是三欄相互關聯，有必定的抗性。須要注意的是，佈局中間部分必定要放在前面，左右順序不限制。對於left快的margin負值必定要等於wrap的寬度。

（用relative，沒有用包一層div的方法叫作聖盃，用一層div後，叫作雙飛翼）雙飛翼http://www.cnblogs.com/tinyphp/p/4742922.html。相比聖盃佈局，雙飛翼沒必要設置左右欄的 position: relative，也沒必要設置左右left、right值，只需多添加一個子元素包含，相應的padding換成margin。總的說來簡單很多。

雙飛翼佈局的好處：

1. 主要的內容先加載的優化；
2. 兼容目前全部的主流瀏覽器，包括IE6在內；
3. 實現不一樣的佈局方式，能夠經過調整相關CSS屬性便可實現。

 

2. flex方法

使用display：flex；