【前端工程師手冊】佈局

時間 2019-12-07

標籤前端工程師手冊佈局简体版

原文原文鏈接

今天總結一下佈局，以前校招面試的時候貌似很喜歡考佈局，例如兩欄自適應佈局、三欄自適應佈局等等，實現的方法多種多樣，總結一下之後就不亂了。html

兩欄佈局

這裏咱們講的兩欄佈局通常是左定寬右自適應的
面試

左float+右margin-leftapp

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

   }
   .common {
       height: 100%;
   }
   .aside {
       width: 200px;
       background: green;
       float: left;
   }
   .main {
       background: red;
       margin-left: 200px;
   }
   <div class="wrapper">
       <div class="aside common">
           <h2>側欄</h2>
       </div>
       <div class="main common">
           <h1>主欄</h1>
       </div>
   </div>

雙float+右calcide

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

   }
   .common {
       height: 100%;
       float: left;
   }
   .aside {
       width: 200px;
       background: green;
   }
   .main {
       background: red;
       width: calc(100% - 200px);
   }
   <div class="wrapper">
       <div class="aside common">
           <h2>側欄</h2>
       </div>
       <div class="main common">
           <h1>主欄</h1>
       </div>
   </div>

左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;
   }
      <div class="wrapper">
          <div class="aside common">
           <h2>側欄</h2>
       </div>
       <div class="main common">
           <h1>主欄</h1>
       </div>
   </div>

雙absoluteflex

.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;
   }
      <div class="wrapper">
       <div class="aside common">
           <h2>側欄</h2>
       </div>
       <div class="main common">
           <h1>主欄</h1>
       </div>
   </div>

flexspa

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;
   }
   <div class="wrapper">
       <div class="aside common">
           <h2>側欄</h2>
       </div>
       <div class="main common">
           <h1>主欄</h1>
       </div>
   </div>

三欄佈局

這裏說的三欄佈局是左右定寬，中間自適應
code

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

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;
   }
   <div class="wrapper">
       <div class="left"></div>
       <div class="right"></div>
       <div class="main"></div>
   </div>

BFC特性的三欄佈局（後面總結BFC）blog

.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;
   }
   <div class="container">
       <div class="left">
           <h1>Left</h1>
       </div>
       <div class="right">
           <h1>Right</h1>
       </div>
       <div class="main">
           <h1>Content</h1>
       </div>
   </div>

聖盃佈局

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;
   }
   <div class="wrapper">
       <div class="content common">
           <h1>Content</h1>
       </div>
       <div class="left common">
           <h1>Left</h1>
       </div>
       <div class="right common">
           <h1>Right</h1>
       </div>
   </div>

中間內容區content在最前面，後面依次是left和right。
首先Content、Left、Right都設爲float:left，而後Content寬度設爲100%，此時Left和Right被擠到了下面一行；
將Left的margin-left設爲-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負外左邊距設爲它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
此時再設置wapper的左右padding分別爲Left和Right的寬度，此時Content的寬度被壓縮到了合適的位置，可是Left和Right仍沒有到正確的位置
最後經過相對定位，設置Left和Right都爲relative，且Left的left設爲其負寬度，Right的right設爲其負寬度

雙飛翼佈局

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;
   }
   <div class="content common">
       <div class="content-in">
           <h1>Content</h1>
       </div>
   </div>
   <div class="left common">
       <h1>Left</h1>
   </div>
   <div class="right common">
       <h1>Right</h1>
   </div>

首先Content、Left、Right都設置float:left；
將Left的margin-left設爲-100%，Left被拉到了Content的最左邊，且遮擋了Content的左邊部分；將Right的負外左邊距設爲它的寬度，Right被拉到了Content的最右邊，且遮住了Content的右邊部分
Content-in設置左右margin分別爲Left寬度和Right寬度便可

絕對定位

.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;
   }
   <div class="wrapper">
        <div class="content common">
           <h1>Content</h1>
       </div>
       <div class="left common">
           <h1>Left</h1>
       </div>
       <div class="right common">
           <h1>Right</h1>
       </div>
    </div>

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;
   }
   <div class="wrapper">
       <div class="content common">
           <h1>Content</h1>
       </div>
       <div class="left common">
           <h1>Left</h1>
       </div>
       <div class="right common">
           <h1>Right</h1>
       </div>
   </div>

總結

總結髮現實現兩欄或者三欄佈局的方法大概有這麼幾種

脫離文檔流+margin
在上面的實現方式中使用float和position:absolute來脫離文檔流，而後再讓剩下的元素調整外邊距margin來作成自適應。
脫離文檔流+觸發BFC
使用float脫離文檔流以後，咱們再利用BFC區域不會與浮動元素重疊的特性來使剩下的元素自適應。
純絕對定位
全部的欄都設置position:absolute，而後定寬元素設置寬度、left和Right位置，自適應元素只設置left和right位置
flex
使用flex的flex-grow和flex-shrink能夠來實現自適應佈局
其餘
相似雙飛翼和聖盃佈局其實也是部分利用了浮動和定位的知識，以及負margin相關的操做，整體的知識並不變化