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

圣杯布局和雙飛翼布局一直是前端面試的高頻考點(diǎn)轻专，圣杯布局的出現(xiàn)是來自由 Matthew Levine 在 2006 年寫的一篇文章《In Search of the Holy Grail》。比起雙飛翼布局，它的起源不是源于對頁面的形象表達(dá)乞封。在西方煞躬，圣杯是表達(dá)“渴求之物”的意思瑟蜈。而雙飛翼布局則是源于淘寶的UED爽哎，可以說是靈感來自于頁面渲染。

效果圖

原本錄制了一個(gè)小視頻，奈何不能上傳到博客中捐腿，視頻中通過縮放頁面可以發(fā)現(xiàn)隨著頁面的寬度的變化纵朋，這三欄布局是中間盒子優(yōu)先渲染，兩邊的盒子框子寬度固定不變茄袖，即使頁面寬度變小操软，也不影響我們的瀏覽。注意：為了安全起見宪祥，最好還是給body加一個(gè)最小寬度!

圣杯布局要求

header和footer各自占領(lǐng)屏幕所有寬度聂薪，高度固定。
中間的container是一個(gè)三欄布局蝗羊。
三欄布局兩側(cè)寬度固定不變藏澳，中間部分自動(dòng)填充整個(gè)區(qū)域。
中間部分的高度是三欄中最高的區(qū)域的高度肘交。

圣杯布局的三種實(shí)現(xiàn)

【1】浮動(dòng)

先定義好header和footer的樣式笆载，使之橫向撐滿扑馁。
在container中的三列設(shè)為浮動(dòng)和相對定位(后面會(huì)用到)涯呻，center要放在最前面，footer清除浮動(dòng)复罐。
三列的左右兩列分別定寬200px和150px雄家，中間部分center設(shè)置100%撐滿
這樣因?yàn)楦?dòng)的關(guān)系，center會(huì)占據(jù)整個(gè)container趟济，左右兩塊區(qū)域被擠下去了
接下來設(shè)置left的 margin-left: -100%;，讓left回到上一行最左側(cè)
但這會(huì)把center給遮住了戚炫，所以這時(shí)給外層的container設(shè)置 padding-left: 200px;padding-right: 150px;媳纬，給left和right空出位置
這時(shí)left并沒有在最左側(cè)，因?yàn)橹耙呀?jīng)設(shè)置過相對定位钮惠，所以通過 left: -200px; 把left拉回最左側(cè)
同樣的，對于right區(qū)域蔑赘，設(shè)置 margin-right: -150px; 把right拉回第一行
這時(shí)右側(cè)空出了150px的空間，所以最后設(shè)置 right: -150px;把right區(qū)域拉到最右側(cè)就行了缩赛。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }

  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }

  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }

  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }

  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }

  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }

  #right {
    width: 150px;           /* rightContent width */
    margin-right: -150px;   /* rightContent width */
    background: rgb(231, 105, 2);
  }

</style>

<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>

</body>

</html>

【2】flex彈性盒子

header和footer設(shè)置樣式峦筒，橫向撐滿。
container中的left卤材、center峦失、right依次排布即可
給container設(shè)置彈性布局 display: flex;
left和right區(qū)域定寬扇丛，center設(shè)置 flex: 1; 即可

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  
    font-weight: bold;
    font-size: 20px;
  }
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
   display: flex;
  }
  #container .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    flex: 1;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;        
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;           
    background: rgb(231, 105, 2);
  }
</style>

<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="left" class="column">#left</div>
    <div id="center" class="column">#center</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>

</html>

【3】grid布局

如上圖所示，我們把body劃分成三行四列的網(wǎng)格隧魄，其中有5條列網(wǎng)格線

給body元素添加display: grid;屬性變成一個(gè)grid(網(wǎng)格)
給header元素設(shè)置grid-row: 1; 和 grid-column: 1/5; 意思是占據(jù)第一行網(wǎng)格的從第一條列網(wǎng)格線開始到第五條列網(wǎng)格線結(jié)束
給footer元素設(shè)置grid-row: 1; 和 grid-column: 1/5; 意思是占據(jù)第三行網(wǎng)格的從第一條列網(wǎng)格線開始到第五條列網(wǎng)格線結(jié)束
給left元素設(shè)置grid-row: 2; 和 grid-column: 1/2; 意思是占據(jù)第二行網(wǎng)格的從第一條列網(wǎng)格線開始到第二條列網(wǎng)格線結(jié)束
給center元素設(shè)置grid-row: 2; 和 grid-column: 2/4; 意思是占據(jù)第二行網(wǎng)格的從第二條列網(wǎng)格線開始到第四條列網(wǎng)格線結(jié)束
給right元素設(shè)置grid-row: 2; 和 grid-column: 4/5; 意思是占據(jù)第二行網(wǎng)格的從第四條列網(wǎng)格線開始到第五條列網(wǎng)格線結(jié)束

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
    display: grid;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #header {
    grid-row: 1;
    grid-column: 1/5;
  }
  #footer {
    grid-row: 3;
    grid-column: 1/5;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left {
    grid-row: 2;
    grid-column: 1/2;
    background: rgba(95, 179, 235, 0.972);
  }
  #center {
    grid-row: 2;
    grid-column: 2/4;
    background: rgb(206, 201, 201);
  }
  #right {
    grid-row: 2;
    grid-column: 4/5;
    background: rgb(231, 105, 2);
  }
</style>

<body>
  <div id="header">#header</div>
  <div id="left" class="column">#left</div>
  <div id="center" class="column">#center</div>
  <div id="right" class="column">#right</div>
  <div id="footer">#footer</div>
</body>

</html>

文章每周持續(xù)更新购啄，可以微信搜索「 前端大集錦 」第一時(shí)間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料