摘要：子元素固定高寬子元素不定高寬缺點需要設置子元素寬度包括百分比等非固定寬度也可以原理是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。路途未完，行囊已空衣裳破裂污損，人已精疲力竭。拋棄顏色形狀等干擾代碼實際布局

PS: 這些只是個人學習,僅供思路參考,可能會有缺陷,并且都在chrome中測試,不一定適用其他瀏覽器,而且不考慮IE的,切記!!

PS: 2018/03/23修改，重整了一下樣式，新增了一些方法原理介紹，

建議先了解一下基礎知識,實際上算深入基礎了，隨意門:
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC
想要清晰的明白（二）CSS 盒模型Block box與Line box

基礎配置如下,只是一個基本的父子嵌套元素

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

因為B是塊狀，所以看不出效果，但是如果不設置寬度其實就默認占滿全屏
這是最基礎最簡單的寫法

#child {margin: 0 auto;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點:

1) 需要設置寬度(包括百分比等非固定寬度也可以)

原理：父元素設置相對定位，子元素設置絕對定位，偏移一側父元素寬度50%，子元素外邊距反向負值調整自身寬度50%。重點是從中可以看出這個需要知道子元素的寬度；

#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點:

1) 需要設置子元素寬度(包括百分比等非固定寬度也可以)

原理：跟上面原理一樣，但是使用了css3的transform屬性可以自動計算子元素寬度調整

#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優點:

1) 不需要知道子元素具體寬度;

缺點:

1) transform,兼容性一般,IE9+;

原理：設置方向值,同時給元素一個對應的高寬,它會自動補全margin，就能保持居中了。具體原理參見上面文章。

#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點:

1) 需要設置子元素寬度(包括百分比等非固定寬度也可以)

原理：Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
隨意門:
Flex 布局教程：語法篇
Flex 布局教程：實例篇

#parent {
    display: flex;//fles布局
    justify-content: center;//主軸上的對齊方式（即水平定位）
    align-items: flex-start;//交叉軸的起點對齊（即垂直定位）,默認stretch，如果項目未設置高度或設為auto會導致子元素高度占滿父元素
}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

真是前端救星,有了這個可以無視以前各種詭異屬性實現的居中

優點:

1) 布局靈活全面

缺點:

1) align-items默認stretch，如果項目未設置高度或設為auto會導致子元素高度占滿父元素
2) 兼容性一般

原理：子元素設置成行內塊狀元素，父元素設置文本居中對齊也能使其生效

#parent{text-align: center;}
#child {display: inline-block;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優點:

1) 不需要設置子元素具體寬度;
2) 兼容性好，甚至可以兼容ie6、ie7;

缺點:

1) 因為text-align是繼承樣式，會導致下級所有元素文字生效

原理：table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。然后讓子元素居中

CSS2.1表格模型中的元素，可能不會全部包含在除HTML之外的文檔語言中。這時，那些“丟失”的元素會被模擬出來，從而使得表格模型能夠正常工作。所有的表格元素將會自動在自身周圍生成所需的匿名table對象，使其符合table/inline-table、table-row、table- cell的三層嵌套關系。
特征:
1) 同行等高;
2) 寬度自動調節;

#parent{display:table-cell;vertical-align:middle;}

缺點:

1) display類型有限制,只有一個元素屬于inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。;
2) 父元素不能使用浮動屬性;
3) IE8下需要特殊處理;
4) 這是一個很復雜的屬性組合,下面文章能看的你懷疑人生;

隨意門:
CSS深入研究:display的恐怖故事解密(1) - inline-block
CSS深入研究:display的恐怖故事解密(2) - table-cell
大小不固定的圖片、多行文字的水平垂直居中
我所知道的幾種display:table-cell的應用
我對CSS vertical-align的一些理解與認識（一）
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友關系

原優缺點都同上，就不再重復了：

#parent{position: relative;}
#child {position: absolute; top: 50%; margin-top: -100px;}

#parent{position: relative;}
#child {position: absolute; top: 50%; transform: translate(0,-50%);}

#parent{position: relative;}
#child {position: absolute; top: 0; bottom: 0; margin: auto;}

原理：Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。上面也提到過它的交叉軸的起點對齊（即垂直定位）align-items；

#parent{display: flex; align-items: center;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優點:
1) 布局靈活全面
2) 即使不設置寬度也不會默認占滿全行
缺點:
1) 兼容性一般

#parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#child {
  display: inline-block;
}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優缺點都已經總結過了，而且基本顛覆了父子元素表現形式還影響后代元素的樣式，唯一的優點只有兼容性好了

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

雖然代碼量有點多，兼容性有點瑕疵，但還是相當不錯的

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

完美布局，唯一能限制它的只有瀏覽器了

1) float浮動屬性
原理：通過float浮動屬性讓元素脫離文檔流，后續元素不能定寬，也不能同使用浮動屬性，但可以根據需求決定是或否使用overflow防止內容溢出

.left {
  float: left;
}
.right {
  overflow: hidden;
}

  
    
    
    
  

  
    

      

      

        

        
Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒不再歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下蘇醒。
      
      
    
  

2) table屬性
原理：通過模擬table表現形式達到效果，根據特性還能省略設置元素高寬就能自行占滿

.content {display:table; table-layout:fixed; }
.left,
.right{display:table-cell;}

  
    
    
    
  

  
    

      

      

        

        
Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒不再歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下蘇醒。
      
      
    
  

3) flex布局
原理：Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。

.content {display:flex;}
.right{flex:1;}

  
    
    
    
  

  
    

      

      

        

        
Done 當時光已逝 If the day is done , 假如時光已逝， If birds sing no more . 鳥兒不再歌唱， If the wind has fiagged tired , 風兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時節你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又輕輕合上睡蓮的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污損，人已精疲力竭。 Whose garment is torn and dust-laden , 你驅散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發生機。 The cover of thy kindly night . 在你慈愛的夜幕下蘇醒。
      
      
    
  

基礎結構

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當時光已逝
          If the day is done ,
          假如時光已逝，
          If birds sing no more .
          鳥兒不再歌唱，
          If the wind has fiagged tired ,
          風兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時節你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又輕輕合上睡蓮的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污損，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驅散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發生機。
          The cover of thy kindly night .
          在你慈愛的夜幕下蘇醒。
        
        

        

      
      
    
  

前期主要步驟:
1) content子元素浮動;
2) main寬度滿屏放在首位,中間欄要在瀏覽器中優先展示渲染(這里我沒太懂有多大區別???);
3) left和right分別用負邊距強行并排;

到目前為止看起來效果已經滿足了，實際left和right這種玩法是覆蓋在main之上的，導致部分內容被遮蓋了；
然后圣杯布局&雙飛翼布局的差別就在后續步驟了

圣杯布局：
4) content加上內邊距padding；
5) left和right使用相對定位偏移；

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當時光已逝
          If the day is done ,
          假如時光已逝，
          If birds sing no more .
          鳥兒不再歌唱，
          If the wind has fiagged tired ,
          風兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時節你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又輕輕合上睡蓮的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污損，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驅散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發生機。
          The cover of thy kindly night .
          在你慈愛的夜幕下蘇醒。
        
        

        

      
      
    
  

雙飛翼布局：
4) main加上嵌套元素inner，并設置內邊距；

  
    
    
    
  

  
    

      

      

        

          

            When Day Is Done
            當時光已逝
            If the day is done ,
            假如時光已逝，
            If birds sing no more .
            鳥兒不再歌唱，
            If the wind has fiagged tired ,
            風兒也吹倦了，
            Then draw the veil of darkness thick upon me ,
            那就用黑暗的厚幕把我蓋上，
            Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
            如同黃昏時節你用睡眠的衾被裹住大地，
            The petals of the drooping lotus at dusk.
            又輕輕合上睡蓮的花瓣。
            From the traverer,
            路途未完，行囊已空,
            Whose sack of provisions is empty before the voyage is ended ,
            衣裳破裂污損，人已精疲力竭。
            Whose garment is torn and dust-laden ,
            你驅散了旅客的羞愧和困窘，
            Whose strength is exhausted,remove shame and poverty ,
            使他在你仁慈的夜幕下，
            And renew his life like a flower under
            如花朵般煥發生機。
            The cover of thy kindly night .
            在你慈愛的夜幕下蘇醒。
        
        
        

        

      
      
    
  

從中可以看出之間的分歧在于：
圣杯布局：父元素設置內邊距，子元素設置相對偏移，影響區域從上至下
雙飛翼布局：目標元素嵌套多層元素，該元素內部設置內邊距，影響區域僅限該元素

flex寫法：
1) contanier設置flex布局，至少高度滿屏，方向豎直，可以占據全屏效果;
2) content 設置flex布局，方向水平，放大比例1，可以占滿寬度；
3) main放大比例1，可以占據剩余空間；
4) left排列順序放前；

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當時光已逝
          If the day is done ,
          假如時光已逝，
          If birds sing no more .
          鳥兒不再歌唱，
          If the wind has fiagged tired ,
          風兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時節你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又輕輕合上睡蓮的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污損，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驅散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發生機。
          The cover of thy kindly night .
          在你慈愛的夜幕下蘇醒。
        
        

        

      
      
    
  

拋棄顏色形狀等干擾代碼,實際布局用到的css

.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.main{flex: 1;}
.left{order: -1;}

全程不需要計算數值，不需要偏移位置，用flex布局可以控制方向，比例，順序，自動計算樣式

上面的知識點可以讓你應該絕大多數的頁面布局了，移動端又會涉及更多知識點，隨意門：
viewports剖析

使用Flexible實現手淘H5頁面的終端適配