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

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

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

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

基礎(chǔ)配置如下,只是一個(gè)基本的父子嵌套元素

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

因?yàn)锽是塊狀，所以看不出效果，但是如果不設(shè)置寬度其實(shí)就默認(rèn)占滿(mǎn)全屏
這是最基礎(chǔ)最簡(jiǎn)單的寫(xiě)法

#child {margin: 0 auto;}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點(diǎn):

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

原理：父元素設(shè)置相對(duì)定位，子元素設(shè)置絕對(duì)定位，偏移一側(cè)父元素寬度50%，子元素外邊距反向負(fù)值調(diào)整自身寬度50%。重點(diǎn)是從中可以看出這個(gè)需要知道子元素的寬度；

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點(diǎn):

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

原理：跟上面原理一樣，但是使用了css3的transform屬性可以自動(dòng)計(jì)算子元素寬度調(diào)整

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優(yōu)點(diǎn):

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

缺點(diǎn):

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

原理：設(shè)置方向值,同時(shí)給元素一個(gè)對(duì)應(yīng)的高寬,它會(huì)自動(dòng)補(bǔ)全margin，就能保持居中了。具體原理參見(jiàn)上面文章。

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

缺點(diǎn):

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

原理：Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
隨意門(mén):
Flex 布局教程：語(yǔ)法篇
Flex 布局教程：實(shí)例篇

#parent {
    display: flex;//fles布局
    justify-content: center;//主軸上的對(duì)齊方式（即水平定位）
    align-items: flex-start;//交叉軸的起點(diǎn)對(duì)齊（即垂直定位）,默認(rèn)stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto會(huì)導(dǎo)致子元素高度占滿(mǎn)父元素
}

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

真是前端救星,有了這個(gè)可以無(wú)視以前各種詭異屬性實(shí)現(xiàn)的居中

優(yōu)點(diǎn):

1) 布局靈活全面

缺點(diǎn):

1) align-items默認(rèn)stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto會(huì)導(dǎo)致子元素高度占滿(mǎn)父元素
2) 兼容性一般

原理：子元素設(shè)置成行內(nèi)塊狀元素，父元素設(shè)置文本居中對(duì)齊也能使其生效

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優(yōu)點(diǎn):

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

缺點(diǎn):

1) 因?yàn)閠ext-align是繼承樣式，會(huì)導(dǎo)致下級(jí)所有元素文字生效

原理：table-cell屬性指讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)，類(lèi)似于td標(biāo)簽。然后讓子元素居中

CSS2.1表格模型中的元素，可能不會(huì)全部包含在除HTML之外的文檔語(yǔ)言中。這時(shí)，那些“丟失”的元素會(huì)被模擬出來(lái)，從而使得表格模型能夠正常工作。所有的表格元素將會(huì)自動(dòng)在自身周?chē)伤璧哪涿鹴able對(duì)象，使其符合table/inline-table、table-row、table- cell的三層嵌套關(guān)系。
特征:
1) 同行等高;
2) 寬度自動(dòng)調(diào)節(jié);

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

缺點(diǎn):

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

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

原優(yōu)缺點(diǎn)都同上，就不再重復(fù)了：

#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的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。上面也提到過(guò)它的交叉軸的起點(diǎn)對(duì)齊（即垂直定位）align-items；

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優(yōu)點(diǎn):
1) 布局靈活全面
2) 即使不設(shè)置寬度也不會(huì)默認(rèn)占滿(mǎn)全行
缺點(diǎn):
1) 兼容性一般

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

優(yōu)缺點(diǎn)都已經(jīng)總結(jié)過(guò)了，而且基本顛覆了父子元素表現(xiàn)形式還影響后代元素的樣式，唯一的優(yōu)點(diǎn)只有兼容性好了

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

雖然代碼量有點(diǎn)多，兼容性有點(diǎn)瑕疵，但還是相當(dāng)不錯(cuò)的

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

  
    
    
    
  

  
    
子元素固定高寬A
    

      
A
    
    
子元素不定高寬B
    

      
B
    
  

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

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

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

  
    
    
    
  

  
    

      

      

        

        
Done 當(dāng)時(shí)光已逝 If the day is done , 假如時(shí)光已逝， If birds sing no more . 鳥(niǎo)兒不再歌唱， If the wind has fiagged tired , 風(fēng)兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地， 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 , 你驅(qū)散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發(fā)生機(jī)。 The cover of thy kindly night . 在你慈愛(ài)的夜幕下蘇醒。
      
      
    
  

2) table屬性
原理：通過(guò)模擬table表現(xiàn)形式達(dá)到效果，根據(jù)特性還能省略設(shè)置元素高寬就能自行占滿(mǎn)

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

  
    
    
    
  

  
    

      

      

        

        
Done 當(dāng)時(shí)光已逝 If the day is done , 假如時(shí)光已逝， If birds sing no more . 鳥(niǎo)兒不再歌唱， If the wind has fiagged tired , 風(fēng)兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地， 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 , 你驅(qū)散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發(fā)生機(jī)。 The cover of thy kindly night . 在你慈愛(ài)的夜幕下蘇醒。
      
      
    
  

3) flex布局
原理：Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。

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

  
    
    
    
  

  
    

      

      

        

        
Done 當(dāng)時(shí)光已逝 If the day is done , 假如時(shí)光已逝， If birds sing no more . 鳥(niǎo)兒不再歌唱， If the wind has fiagged tired , 風(fēng)兒也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我蓋上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地， 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 , 你驅(qū)散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般煥發(fā)生機(jī)。 The cover of thy kindly night . 在你慈愛(ài)的夜幕下蘇醒。
      
      
    
  

基礎(chǔ)結(jié)構(gòu)

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當(dāng)時(shí)光已逝
          If the day is done ,
          假如時(shí)光已逝，
          If birds sing no more .
          鳥(niǎo)兒不再歌唱，
          If the wind has fiagged tired ,
          風(fēng)兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地，
          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 ,
          你驅(qū)散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發(fā)生機(jī)。
          The cover of thy kindly night .
          在你慈愛(ài)的夜幕下蘇醒。
        
        

        

      
      
    
  

前期主要步驟:
1) content子元素浮動(dòng);
2) main寬度滿(mǎn)屏放在首位,中間欄要在瀏覽器中優(yōu)先展示渲染(這里我沒(méi)太懂有多大區(qū)別???);
3) left和right分別用負(fù)邊距強(qiáng)行并排;

到目前為止看起來(lái)效果已經(jīng)滿(mǎn)足了，實(shí)際left和right這種玩法是覆蓋在main之上的，導(dǎo)致部分內(nèi)容被遮蓋了；
然后圣杯布局&雙飛翼布局的差別就在后續(xù)步驟了

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

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當(dāng)時(shí)光已逝
          If the day is done ,
          假如時(shí)光已逝，
          If birds sing no more .
          鳥(niǎo)兒不再歌唱，
          If the wind has fiagged tired ,
          風(fēng)兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地，
          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 ,
          你驅(qū)散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發(fā)生機(jī)。
          The cover of thy kindly night .
          在你慈愛(ài)的夜幕下蘇醒。
        
        

        

      
      
    
  

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

  
    
    
    
  

  
    

      

      

        

          

            When Day Is Done
            當(dāng)時(shí)光已逝
            If the day is done ,
            假如時(shí)光已逝，
            If birds sing no more .
            鳥(niǎo)兒不再歌唱，
            If the wind has fiagged tired ,
            風(fēng)兒也吹倦了，
            Then draw the veil of darkness thick upon me ,
            那就用黑暗的厚幕把我蓋上，
            Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
            如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地，
            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 ,
            你驅(qū)散了旅客的羞愧和困窘，
            Whose strength is exhausted,remove shame and poverty ,
            使他在你仁慈的夜幕下，
            And renew his life like a flower under
            如花朵般煥發(fā)生機(jī)。
            The cover of thy kindly night .
            在你慈愛(ài)的夜幕下蘇醒。
        
        
        

        

      
      
    
  

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

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

  
    
    
    
  

  
    

      

      

        

          When Day Is Done
          當(dāng)時(shí)光已逝
          If the day is done ,
          假如時(shí)光已逝，
          If birds sing no more .
          鳥(niǎo)兒不再歌唱，
          If the wind has fiagged tired ,
          風(fēng)兒也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我蓋上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黃昏時(shí)節(jié)你用睡眠的衾被裹住大地，
          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 ,
          你驅(qū)散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般煥發(fā)生機(jī)。
          The cover of thy kindly night .
          在你慈愛(ài)的夜幕下蘇醒。
        
        

        

      
      
    
  

拋棄顏色形狀等干擾代碼,實(shí)際布局用到的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;}

全程不需要計(jì)算數(shù)值，不需要偏移位置，用flex布局可以控制方向，比例，順序，自動(dòng)計(jì)算樣式

上面的知識(shí)點(diǎn)可以讓你應(yīng)該絕大多數(shù)的頁(yè)面布局了，移動(dòng)端又會(huì)涉及更多知識(shí)點(diǎn)，隨意門(mén)：
viewports剖析

使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配