摘要：本文概要本文將介紹如下幾種常見(jiàn)的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問(wèn)題，實(shí)現(xiàn)了內(nèi)容與布局的分離。

本文將介紹如下幾種常見(jiàn)的布局：

其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。另外幾種可以猛戳實(shí)現(xiàn)三欄布局的幾種方法

常見(jiàn)的單列布局有兩種：

header,content和footer等寬的單列布局

header與footer等寬,content略窄的單列布局

對(duì)于第一種，先通過(guò)對(duì)header,content,footer統(tǒng)一設(shè)置width：1000px;或者max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于1000px時(shí)，前者會(huì)出現(xiàn)滾動(dòng)條，后者則不會(huì)，顯示出實(shí)際寬度);然后設(shè)置margin:auto實(shí)現(xiàn)居中即可得到。

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

對(duì)于第二種，header、footer的內(nèi)容寬度不設(shè)置，塊級(jí)元素充滿整個(gè)屏幕，但header、content和footer的內(nèi)容區(qū)設(shè)置同一個(gè)width，并通過(guò)margin:auto實(shí)現(xiàn)居中。

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

兩列自適應(yīng)布局是指一列由內(nèi)容撐開(kāi)，另一列撐滿剩余寬度的布局方式

如果是普通的兩列布局，浮動(dòng)+普通元素的margin便可以實(shí)現(xiàn)，但如果是自適應(yīng)的兩列布局，利用float+overflow:hidden便可以實(shí)現(xiàn)，這種辦法主要通過(guò)overflow觸發(fā)BFC,而B(niǎo)FC不會(huì)重疊浮動(dòng)元素。由于設(shè)置overflow:hidden并不會(huì)觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來(lái)兼容IE6-瀏覽器。具體代碼如下：

    

        
left
    
    

        
right
        
right
    
        

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

注意點(diǎn):如果側(cè)邊欄在右邊時(shí)，注意渲染順序。即在HTML中，先寫(xiě)側(cè)邊欄后寫(xiě)主內(nèi)容

Flex布局，也叫彈性盒子布局，區(qū)區(qū)簡(jiǎn)單幾行代碼就可以實(shí)現(xiàn)各種頁(yè)面的的布局。

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

Grid布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，目的是用來(lái)優(yōu)化用戶界面設(shè)計(jì)。

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
} 

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫(xiě)中間列部分，這樣實(shí)現(xiàn)中間列可以優(yōu)先加載。

  .container {
    padding-left: 220px;//為左右欄騰出空間
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

  

    

      
圣杯布局
    
    

    

  

三個(gè)部分都設(shè)定為左浮動(dòng)，否則左右兩邊內(nèi)容上不去，就不可能與中間列同一行。然后設(shè)置center的寬度為100%(實(shí)現(xiàn)中間列內(nèi)容自適應(yīng))，此時(shí)，left和right部分會(huì)跳到下一行

通過(guò)設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行

通過(guò)設(shè)置父容器的padding-left和padding-right，讓左右兩邊留出間隙。

通過(guò)設(shè)置相對(duì)定位，讓left和right部分移動(dòng)到兩邊。

center部分的最小寬度不能小于left部分的寬度，否則會(huì)left部分掉到下一行

如果其中一列內(nèi)容高度拉長(zhǎng)(如下圖)，其他兩列的背景并不會(huì)自動(dòng)填充。(借助等高布局正padding+負(fù)margin可解決，下文會(huì)介紹)

同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問(wèn)題，實(shí)現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會(huì)出問(wèn)題。

    .container {
        min-width: 600px;//確保中間內(nèi)容可以顯示出來(lái)，兩倍left寬+right寬
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

    

        

            
雙飛翼布局
        
        

        

    

三個(gè)部分都設(shè)定為左浮動(dòng)，然后設(shè)置center的寬度為100%，此時(shí)，left和right部分會(huì)跳到下一行；

通過(guò)設(shè)置margin-left為負(fù)值讓left和right部分回到與center部分同一行；

center部分增加一個(gè)內(nèi)層div，并設(shè)margin: 0 200px；

多加一層 dom 樹(shù)節(jié)點(diǎn)，增加渲染樹(shù)生成的計(jì)算量。

兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。

兩種布局方式在實(shí)現(xiàn)上也有相同之處，都是讓三列浮動(dòng)，然后通過(guò)負(fù)外邊距形成三列布局。

兩種布局方式的不同之處在于如何處理中間主列的位置：
圣杯布局是利用父容器的左、右內(nèi)邊距+兩個(gè)從列相對(duì)定位；
雙飛翼布局是把主列嵌套在一個(gè)新的父級(jí)塊中利用主列的左、右外邊距進(jìn)行布局調(diào)整

等高布局是指子元素在父元素中高度相等的布局方式。接下來(lái)我們介紹常見(jiàn)幾種實(shí)現(xiàn)方式：

我們通過(guò)等布局便可解決圣杯布局的第二點(diǎn)缺點(diǎn)，因?yàn)楸尘笆窃?padding 區(qū)域顯示的，設(shè)置一個(gè)大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個(gè)容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實(shí)現(xiàn)多列等高布局，并且也能實(shí)現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡(jiǎn)單，兼容所有瀏覽器。新增代碼如下：

      .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

這種方法是我們實(shí)現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假象。實(shí)現(xiàn)方法簡(jiǎn)單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實(shí)現(xiàn),但此方法不適合流體布局等高列的布局。

在制作樣式之前需要一張類似下面的背景圖：

.container {
  background: url("column.png") repeat-y;
  width: 960px;
  margin: 0 auto;
}
.left {
  float: left;
  width: 220px;
}
.content {
  float: left;
  width: 480px;
}
.right {
  float: left;
  width: 220px;
}

這是一種非常簡(jiǎn)單，易于實(shí)現(xiàn)的方法。不過(guò)兼容性不好，在ie6-7無(wú)法正常運(yùn)行。

   

      

        

          

            ....
          
        
        

          

            ...
          
        
        

          

            ...
          
        
      
    

.table {
  width: auto;
  min-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: table;
}
.tableRow {
  display: table-row;
}
.tableCell {
  display: table-cell;
  width: 33%;
}
.cell1 {
  background: #f00;
  height: 800px;
}
.cell2 {
  background: #0f0;
}
.cell3 {
  background: #00f;
}

這種方法是使用邊框和絕對(duì)定位來(lái)實(shí)現(xiàn)一個(gè)假的高度相等列的效果。結(jié)構(gòu)簡(jiǎn)單，兼容各瀏覽器，容易掌握。假設(shè)你需要實(shí)現(xiàn)一個(gè)兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。

#wrapper {
  width: 960px;
  margin: 0 auto;
}
#mainContent {
  border-right: 220px solid #dfdfdf;
  position: absolute;
  width: 740px;
  height: 800px;  
  background: green;
}
#sidebar {
  background: #dfdfdf;
  margin-left: 740px;
  position: absolute;
  height: 800px;
  width: 220px;
}

    
...
    
...

有一塊內(nèi)容