圣杯布局和雙飛翼布局

ZweiZhao 發(fā)布于2019-08-29 16:13 / 2573人閱讀

摘要：參考文章同學(xué)的關(guān)于圣杯布局，圣杯布局和雙飛翼布局的區(qū)別經(jīng)典布局圣杯布局實(shí)現(xiàn)的效果主要在中，和固定寬度，首先渲染，且自適應(yīng)寬度。

ps: 參考文章 DotHide同學(xué)的“關(guān)于圣杯布局”，圣杯布局和雙飛翼布局的區(qū)別

經(jīng)典布局 圣杯布局

#header

  
    #center
    #left
    #right
  

  #footer

實(shí)現(xiàn)的效果主要在container中，left 和 rgith固定寬度，center首先渲染，且自適應(yīng)寬度。

    body {
      min-width: 500px;
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;
      padding-right: 150px;
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;
      right: 180px; 
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px; 
      margin-right: -150px;
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

該方案幾個(gè)注意的點(diǎn)：

center元素位于left和right之前，可以讓center先渲染，用戶首先看到頁面的主要內(nèi)容。

container （width:100%）包裹著三欄內(nèi)容，通過padding-left和padding-right為左右兩欄騰出空間。

center，left，right都設(shè)置一個(gè)左浮動(dòng)（float:left），所以container內(nèi)部是一個(gè)浮動(dòng)流。

通過給 left 元素設(shè)置 margin-left: -100%，使得left移動(dòng)到container的左上角，在通過position：relative； right: 180px，移動(dòng)到container的padding-left的位置上去。

給right 元素設(shè)置 margin-right: -150px，使得它移動(dòng)到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮動(dòng)流的特性，使得第一行能夠同時(shí)容納center，left，right這三個(gè)元素。

圣杯布局（flexbox實(shí)現(xiàn)）


  #header

  
    #center
    #left
    #right
  

  #footer

    body {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }

如果不考慮ie10及以下的瀏覽器，那么可以使用flex來實(shí)現(xiàn)圣杯布局。而且圣杯布局可以通過讓container填充高度來使得footer達(dá)到一個(gè)sticky的效果。
flex兼容性

雙飛翼布局

圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動(dòng)，但左右兩欄加上負(fù)margin讓其跟中間欄div并排，以形成三欄布局。不同的地方在于解決中間div內(nèi)容不被遮擋的思路上面

圣杯布局的為了中間內(nèi)容不被修改，是通過包裹元素的padding-left和padding-right來使得內(nèi)容div置于中間，然后再通過相對(duì)定位position:relative，配合right或left屬性讓左右兩欄不則當(dāng)中間內(nèi)容。

雙飛翼布局的解決方案是：通過再中間元素的內(nèi)部新增一個(gè)div用于放置內(nèi)容，然后通過左右外邊距margin-left和margin-right為左右兩欄留出位置。

雙飛翼布局多了1個(gè)div標(biāo)簽，少用了4個(gè)css屬性。少用了padding-left，padding-right，左右兩個(gè)div用相對(duì)布局position: relative及對(duì)應(yīng)的right和left，多了margin-left，margin-right。

#header

  
    
      #center
    
    #left
    #right
  

  #footer

    body {
      min-width: 500px;  
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;  
      margin-left: -150px; 
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }