聖盃佈局和雙飛翼佈局

寫在前面：今天是2019年12月1日 2019年的最後一天，一般每月的開始和每一年的最後一個月老是會有一些新奇的事情，可是無論怎樣 總歸是最好的安排；

今天瞭解的是最多見的聖盃佈局和雙飛翼佈局，初看文字內容，文縐縐的，每次學習知識都會先弄懂爲何叫「聖盃佈局」呢～一個名字來描述是比較不錯的了

主要做用：實現三欄佈局  實現左右兩邊固定，中間自適應的佈局 利用佈局 可優先渲染主要部分

功能：實現左右兩邊固定，中間自適應的佈局 利用佈局 可優先渲染主要部分

相同點：

• 兩側寬度固定，中間寬度自適應；
• 中間部分在 DOM結構上優先，以便先行渲染；
• 容許三列中的任意一列成爲最高列；
• 只須要使用一個額外的 <div> 標籤；

產生聖盃佈局和雙飛翼佈局的緣由：

   網頁渲染中dom是從上到下進行解析，而三欄佈局中，咱們但願優先展現重要的部分，因此但願優先解析中間的部分dom，所以實現三個佈局的排列，產生欄聖盃佈局（聖盃佈局之因此叫作聖盃佈局，多是一種信仰）

傳統的三欄佈局dom結構

<header>header</header>
<section class="wrapper">
    <aside class="col left">left</aside>
    <section class="col main">main</section>
    <aside class="col right">right</aside>
 </section>
 <footer>footer</footer>

優先展現中間重要部分後的dom結構

<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>

公共樣式

header{
  width: 100%;
  height: 50px;
  background-color: red;
}
footer{
  width: 100%;
  height: 50px;
  background-color: red;
}

聖盃佈局：

　　優勢：不須要添加 DOM節點；
　　缺點：中間部分的寬小於左側部分時就會發生布局混亂，即某一列內容若過多，文字會溢出（middle<left即會變形）。
　　解決方法：等高佈局；
　　最小寬度問題：min-width:600px。

　　css中的註釋是開發時的思路

天然語言描述下：

1. 首先基本佈局的實現 dom元素按照順序

 

   2.將left和right移至到中間欄一排 利用float進行定位 

   3.在外層設置padding,讓left和right進行添加padding的值，應用relative定位在左右兩側

.wrapper-shengbei .wrapper{
    /* 3 */
    padding: 0 100px;
    overflow: hidden;
  }
  .wrapper-shengbei .main{
    width: 100%;
    height: 200px;
    background-color: salmon;
    /* 2 */
    float: left;
  }
  .wrapper-shengbei .wrapper .left{
      width: 100px;
      height: 200px;
      background-color: royalblue;
      /* 2 */
      margin-left: -100%;
      float: left;
      /* 3 */
      /* position: relative;
      left: -100px; */
  }
  .wrapper-shengbei .wrapper .right{
      width: 100px;
      height: 200px;
      background-color: rgb(98, 136, 67);
      /* 2 */
      margin-left: -100px;
      float: left;
      /* 3 */
      /* position: relative;
      right: -100px;   */
      
  }

缺點：當瀏覽器中的main的寬度小於兩側的寬度時候 咦：佈局錯亂了

 

雙飛翼佈局

雙飛翼佈局是由淘寶的ued@玉伯提出 https://mp.weixin.qq.com/s/wJZ6p-Wmk0n972A_WYk6aQ

比聖盃佈局不一樣的是，雙飛翼佈局解決了因爲瀏覽器屏幕而致使的內容錯亂問題，

html 的dom結構

<div class="wrapper-double">
     <header>header</header>
     <section class="wrapper">
         <section class="col main">
             <section class="main-wrap">main</section>
         </section>
         <aside class="col left">left</aside>
         <aside class="col right">right</aside>
     </section>
     <footer>footer</footer>
 </div>

　　css中註釋的順序爲實現時的思路順序

.wrapper-double{
    overflow: hidden;
    padding: 0px;   
  }
  .wrapper-double .wrapper{
    overflow: hidden;
    padding: 0px;
  }
  .wrapper-double .col{
    /* 1 */
    float: left;
    /* 3 */
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .wrapper-double .main{
    width: 100%;
    background-color: saddlebrown;
  }
  .wrapper-double .main-wrap{
    /* 2 */
    margin: 0 100px 0 100px;
    height: 200px;
  }
  .wrapper-double .left{
    width: 100px;
    height: 200px;
    /* 2 */
    margin-left: -100%;
    background-color: rgb(98, 136, 67);
  }
  .wrapper-double .right{
    width: 100px;
    height: 200px;
    /* 2 */
    margin-left: -100px;
    background-color: rgb(216, 219, 214);
  }

 

padding-bottom: 9999px;

margin-bottom: -9999px;

利用padding和margin實現等高度變化

.wrapper-double2 .wrapper {
    position: relative;
  }
  .wrapper-double2 .main {
   height: 200px;
   margin: 0 100px;
   background-color: saddlebrown;
  }
  .wrapper-double2 .left,.wrapper-double2 .right{
   width: 100px;
   height: 200px;
   position: absolute;
   top: 0;
   background-color: rgb(98, 136, 67);
  }
  .wrapper-double2 .left{
    height: 300px;
    left: 0;
  }
  .wrapper-double2 .right{
    right: 0;
  }

　缺點是，三欄的高度不足以支撐底部的footer~若是底部的footer是定位在瀏覽器下面是無關係的，動態的增長兩側的高度，發現支撐高度變化

實現三欄佈局的種類不限於這幾種 ～