三欄布局的n種實作

本文主要讨論左右邊欄固定寬度，中間欄填滿其餘空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會有個Demo，個人依然認為文章裡帖代碼并沒有Demo來的直接。是以正文負責解釋，源碼參見Demo。其中讨論了這麼多種（6種）布局，有以下理由：1是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。2是雖然有相對優秀的方案，但是不優秀的方案也有有用的東西在裡邊，可能會啟發其他的思路補充遺漏的知識點。

1. 利用絕對定位特點：左右兩欄采用絕對定位抽離文檔流，分别固定于頁面的左右兩側，中間欄用左右margin值撐開可以容納左右邊欄的距離。這個很簡單不多解釋。Demo: http://www.dabao.love/demo/layoutDemo/absoluteLayout.html
2. 利用兩側浮動都不占據文檔流：左欄左浮動，右欄右浮動，中間欄左右margin值等于左右欄寬度。html中，中間欄要放在左右邊欄的後邊。道理上和絕對定位差不多，就是不占文檔流了其他元素就填充上了，隻要把兩邊留出空間不導緻重合即可。Demo： http://www.dabao.love/demo/layoutDemo/twoSidesFloatLayoutDemo.html
3. 利用浮動和margin負值的特點：标簽順序為<middle></middle>  <left></left>  <right></right> middle 寬度 100%，sub 左右 margin 為左右欄留出空間,其中 sub 元素不要浮動，否則會包裹裡面的内容而不會撐滿空間，其他元素全部左浮動。left 的 margin-left 為－100%，right 的margin-left為sub的負的margin-right 。浮動的特點就是緊跟着前一個元素，放不下了就換行，本來middle元素占滿了第一行，sub元素的margin留出的空間并不會給其他的浮動元素，左欄被迫換行，處于第二行最左側，相當于緊跟着第一行後邊，100%的負margin－left會讓他從緊跟着第一行變成第一行最左邊，這時左欄和sub元素的margin－left留出的空間重合，達到目的，此時右欄在原來左欄的位置，再用類似的處理方式，達到最終效果。其中sub的margin可以換為padding，相同的原理和效果。此處如果不需要撐滿空間（有内容撐滿sub）可以不要父元素（即middle）。Demo： http://www.dabao.love/demo/layoutDemo/floatLayoutDemo.html

1. 利用inline-block特點：父元素包含左中右欄：（子元素順序中，左，右）父元素設定padding為左右欄留出空間，然後中欄寬度100%占據除padding外的空間，左右欄利用margin－left等于自身寬的負值使其與中欄右邊界重合，再調節left，左欄left為－100%右欄left為右欄寬度。左中右欄全部為子元素，是以margin－left無法占據padding空間，需要左右邊欄相對定位後調解left值達到目标狀态。其中注意父元素設定font-size: 0;    letter-spacing: -4px;   子元素再重置這兩個屬性。Demo： http://www.dabao.love/demo/layoutDemo/inlineBlockLayoutDemo.html
2. 利用calc屬性和inline－block特點：（同樣是父元素包含左中右欄）

                                   父元素設定：  text-align:center;    font-size: 0;      letter-spacing: -4px;

                              左中右欄再重置：  font-size: 16px;      letter-spacing: normal;

                              左右欄固定寬度，  html中元素順序為：左，中，右    ，假設左右欄寬度和300px；

                                            中間攔：  width:calc(100% - 300px);

    百分比與固定寬度混合布局使用，支援ie9+，注意＋－＊／号兩邊留白格

Demo：

http://www.dabao.love/demo/layoutDemo/useCalcLayoutDemo.html

1. 利用flex布局：flex布局我認為是最先進而友善的布局，非常靈活不過内容也不少，隻可惜相容ie10+。不在這多廢話，推薦阮一峰老師的教程： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool   父元素display:flex;  ，左右兩欄設定flex-basis  預置寬度，中間欄flex-grow: 1;自動伸展。完活。Demo： http://www.dabao.love/demo/layoutDemo/flexLayoutDemo.html

如有纰漏歡迎批評指正，沒有纰漏也歡迎拍磚。