摘要：今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。脫離文檔流觸發(fā)使用脫離文檔流之后，我們?cè)倮脜^(qū)域不會(huì)與浮動(dòng)元素重疊的特性來(lái)使剩下的元素自適應(yīng)。

今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局、三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。

這里我們講的兩欄布局一般是左定寬右自適應(yīng)的

左float+右margin-left

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;

   }
   .common {
       height: 100%;
   }
   .aside {
       width: 200px;
       background: green;
       float: left;
   }
   .main {
       background: red;
       margin-left: 200px;
   }
   

       

           
側(cè)欄
       
       

           
主欄
       
   
   

雙float+右calc

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;

   }
   .common {
       height: 100%;
       float: left;
   }
   .aside {
       width: 200px;
       background: green;
   }
   .main {
       background: red;
       width: calc(100% - 200px);
   }
   

       

           
側(cè)欄
       
       

           
主欄
       
   
   

左absolute+右margin-left

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;
       position: relative;
   }
   .common {
       height: 100%;
   }
   .aside {
       position: absolute;
       left: 0px;
       width: 200px;
       background: green;
   }
   .main {
       background: red;
       margin-left: 200px;
   }
      

          

           
側(cè)欄
       
       

           
主欄
       
   

雙absolute

   .wrapper {
       height: 100%;
       position: relative;
   }
   .common {
       height: 100%;
   }
   .aside {
       background: green;
       position: absolute;
       left: 0px;
       width: 200px;
   }
   .main {
       background: red;
       position: absolute;
       left: 200px;
       right: 0px;
   }
      

       

           
側(cè)欄
       
       

           
主欄
       
   

flex

   html, body {
       height: 80%;
   }
   .wrapper {
       height: 100%;
       display: flex;
   }
   .common {
       height: 100%;
   }
   .aside {
       flex: 0 1 200px;
       background: green;
   }
   .main {
       flex-grow: 1;
       background: red;
   }
   

       

           
側(cè)欄
       
       

           
主欄
       
   

這里說(shuō)的三欄布局是左右定寬，中間自適應(yīng)

float left + margin-left/margin-right + float right

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 100%;
   }
   .left {
       height: 100%;
       width: 200px;
       float: left;
       background: green;
   }
   .right {
       height: 100%;
       width: 200px;
       float: right;
       background: blue;
   }
   .main {
       height: 100%;
       margin: 0px 200px;
       background: red;
   }
   

       

       

       

   

BFC特性的三欄布局（后面總結(jié)BFC）

   .left {
       float: left;
       height: 200px;
       width: 100px;
       background-color: red;
   }
   .right {
       width: 200px;
       height: 200px;
       float: right;
       background-color: blue;
   }    
   .main {
       height: 200px;
       overflow: hidden;
       background-color: green;
   }
   

       

           
Left
       
       

           
Right
       
       

           
Content
       
   
   

圣杯布局

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 80%;
       padding: 0px 200px;
   }
   .common {
       position: relative;
       float: left;
       height: 100%;
       color: white;
   }
   .content {
       background: red;
       width: 100%;
   }
   .left {
       background: blue;
       width: 200px;
       margin-left: -100%;
       left: -200px;
   }
   .right {
       background: green;
       width: 200px;
       margin-left: -200px;
       right: -200px;
   }
   

       

           
Content
       
       

           
Left
       
       

           
Right
       
   
   

中間內(nèi)容區(qū)content在最前面，后面依次是left和right。
首先Content、Left、Right都設(shè)為float:left，然后Content寬度設(shè)為100%，此時(shí)Left和Right被擠到了下面一行；
將Left的margin-left設(shè)為-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負(fù)外左邊距設(shè)為它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
此時(shí)再設(shè)置wapper的左右padding分別為L(zhǎng)eft和Right的寬度，此時(shí)Content的寬度被壓縮到了合適的位置，但是Left和Right仍沒(méi)有到正確的位置
最后通過(guò)相對(duì)定位，設(shè)置Left和Right都為relative，且Left的left設(shè)為其負(fù)寬度，Right的right設(shè)為其負(fù)寬度

雙飛翼布局

   html, body {
       height: 100%;
   }
   .common {
       height: 100%;
       float: left;
       color: #fff;
   }
   .content {
       background: red;
       width: 100%;
   }
   .content-in {
       margin: 0px 200px;
   }
   .left {
       background: blue;
       width: 200px;
       margin-left: -100%;
   }
   .right {
       background: green;
       width: 200px;
       margin-left: -200px;
   }
   

       

           
Content
       
   
   

       
Left
   
   

       
Right
   

首先Content、Left、Right都設(shè)置float:left；
將Left的margin-left設(shè)為-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負(fù)外左邊距設(shè)為它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
Content-in設(shè)置左右margin分別為L(zhǎng)eft寬度和Right寬度即可

絕對(duì)定位

   .wrapper {
       height: 80%;
       position: relative;
   }
   .common {
       height: 100%;
       color: white;
   }
   .left {
       position: absolute;
       top: 0px;
       left: 0px;
       width: 200px;
       background: green;
       
   }
   .right {
       position: absolute;
       top: 0px;
       right: 0px;
       width: 200px;
       background: blue;
   }
   .content {
       background: red;
       margin: 0 200px;
   }
   

        

           
Content
       
       

           
Left
       
       

           
Right
       
    

flex

   html, body {
       height: 100%;
   }
   .wrapper {
       height: 80%;
       display: flex;
   }
   .common {
       height: 100%;
       color: white;
   }
   .content {
       flex-grow: 1;
       background: red;
   }
   .left {
       flex: 0 1 200px;
       order: -1;
       background: blue;
   }
   .right {
       flex: 0 1 200px;
       background: green;
   }
   

       

           
Content
       
       

           
Left
       
       

           
Right
       
   

總結(jié)發(fā)現(xiàn)實(shí)現(xiàn)兩欄或者三欄布局的方法大概有這么幾種

脫離文檔流+margin
在上面的實(shí)現(xiàn)方式中使用float和position:absolute來(lái)脫離文檔流，然后再讓剩下的元素調(diào)整外邊距margin來(lái)做成自適應(yīng)。

脫離文檔流+觸發(fā)BFC
使用float脫離文檔流之后，我們?cè)倮肂FC區(qū)域不會(huì)與浮動(dòng)元素重疊的特性來(lái)使剩下的元素自適應(yīng)。

純絕對(duì)定位
所有的欄都設(shè)置position:absolute，然后定寬元素設(shè)置寬度、left和Right位置，自適應(yīng)元素只設(shè)置left和right位置

flex
使用flex的flex-grow和flex-shrink可以來(lái)實(shí)現(xiàn)自適應(yīng)布局

其他
類似雙飛翼和圣杯布局其實(shí)也是部分利用了浮動(dòng)和定位的知識(shí)，以及負(fù)margin相關(guān)的操作，總體的知識(shí)并不變化

參考資料
http://zh.learnlayout.com/dis...
http://www.cnblogs.com/imwtr/...
https://zhuanlan.zhihu.com/p/...