前端面試必問的佈局

時間  2019-11-06
標籤 前端 面試 佈局 欄目 快樂工作 简体版
原文   原文鏈接

兩欄佈局

特徵：一欄固定寬，一欄自適應。

  • float瀏覽器

    • 代碼實現
      body,
.container{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    margin-left: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
複製代碼

  • position: absolute佈局

    • 代碼實現
      body,
.container{
    margin: 0;
    padding: 0;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    margin-left: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
複製代碼

  • BFCflex

    • 解釋:
      • 右側設置的overflow: hidden會觸發塊級格式化上下文(BFC) 具備BFC特性的元素能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響外面的元素，而且BFC具備普通元素沒有特性：以下邊距不發生摺疊；能夠清楚浮動；能夠阻止元素被覆蓋。正由於有了這些特性，因此右邊能夠用觸發BFC的元素來清除左邊的浮動的影響。
      • 觸發了BFC的元素依然會保持流體特性，也就是說BFC元素雖然不與浮動交集，自動退避浮動元素寬度的距離，但自己做爲普通元素的流體特性依然存在，反映在佈局上就是自動填滿除去浮動內容之外的剩餘空間
    • 代碼實現
      .container{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    overflow: hidden;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
複製代碼

  • flexspa

    • 代碼實現
      .container{
    margin: 0;
    padding: 0;
    display: flex;
}
.left{
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    flex-grow: 1;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
複製代碼

特徵：一欄不定寬，一欄自適應。

  • float-overflow:hiddencode

    • 代碼實現
      .container{
    zoom: 1;
}
.left{
    float: left;
    background: red;
}
.right{
    overflow: hidden;
    height: 100px;
    background: blue;
    zoom: 1;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
複製代碼

  • flex 佈局it

    • 代碼實現
      .container{
    display: flex;
}
.left{
    background: red;
}
.right{
    flex-grow: 1;
    background: blue;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
複製代碼

  • grid佈局io

    • 代碼實現
      .container{
    display: grid;
    grid-template-columns:auto 1fr;
}
.left{
    background: red;
}
.right{
    background: blue;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
複製代碼

三欄佈局

特徵：中間列自適應寬度，旁邊兩側固定寬度

  • 流體佈局table

    • 原理: 左右模塊各自向左右浮動，並設置中間模塊的margin值使中間模塊寬度自適應
    • 缺點: 主要內容沒法最早加載，當頁面內容較多時會影響用戶體驗
    • 代碼實現
      .left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;          
    background: blue;        
}         
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
 }

<div class="container">        
  <div class="left"></div>        
  <div class="right"></div>        
  <div class="center"></div>    
</div>
複製代碼

  • BFC 三欄佈局class

    • 原理: BFC規則有這樣的描述：BFC 區域不會與浮動元素重疊, 所以咱們能夠利用這一點來實現 3 列布局
    • 缺點: 主要內容模塊沒法最早加載，當頁面中內容較多時會影響用戶體驗。所以爲了解決這個問題，有了下面要介紹的佈局方案雙飛翼佈局
    • 代碼實現
      .left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    overflow: hidden;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
  <div class="left"></div>        
  <div class="right"></div>        
  <div class="center"></div>    
</div>
複製代碼

  • 雙飛翼佈局容器

    • 原理: 利用的是浮動元素margin負值的應用
    • 優勢: 主體內容能夠優先加載
    • 缺點: HTML代碼結構稍微複雜點。
    • 代碼實現
      .container{            
    float: left;            
    width: 100%;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="center"></div>    
</div>
<div class="left"></div> 
<div class="right"></div>
複製代碼

  • 聖盃佈局

    • 和與雙飛翼佈局的區別：與雙飛翼佈局很像，有一些細節上的區別，相對於雙飛翼佈局來講，HTML 結構相對簡單，可是樣式定義就稍微複雜，

    • 優勢：也是優先加載內容主體。

    • 代碼實現

      .container{            
    margin-left: 100px;            
    margin-right: 100px;        
}        
.center{            
    float: left;            
    width: 100%;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    position: relative;            
    left: -100px;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    position: relative;            
    right: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="center"></div>        
  <div class="left"></div>        
  <div class="right"></div>    
</div>
複製代碼

    • Flex佈局

      • 優勢: 簡單實用，將來的趨勢，
      • 缺點: 須要考慮瀏覽器的兼容性。
      • 代碼實現
        .container{            
    display: flex;        
}        
.center{            
    flex-grow: 1;            
    height: 100px;            
    background: orange;        
}        
.left{            
    order: -1; /* order屬性定義項目的排列順序 數值越小 排列越靠前 默認爲0 */            
    flex: 0 1 100px; /* flex-grow flex-shrink flex-basis */            
    height: 100px;            
    background: red;        
}        
.right{            
    flex: 0 1 100px;            
    height: 100px;            
    background: blue;        
}        
/*            
    flex-grow屬性定義項目的放大比例 默認爲0 即若是存在剩餘空間 也不放大            
    flex-shrink屬性定義了項目的縮小比例 默認爲1 即若是空間不足 該項目將縮小            
    flex-basis屬性定義了在分配多餘空間以前 項目佔據的主軸空間（main size） 
        瀏覽器根據這個屬性 計算主軸是否有多餘空間 它的默認值爲auto 即項目的原本大小        
*/

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>
複製代碼

  • Table佈局

    • 缺點：沒法設置欄間距
    • 代碼實現
      .container{            
    display: table; /* 此元素會做爲塊級表格來顯示（相似 <table>）表格先後帶有換行符 */  
    width: 100%;        
}        
.left,        
.center,        
.right{            
    display: table-cell; /* 此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>） */        
}        
.left{            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.center{            
    background: orange;        
}        
.right{            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="left"></div>        
  <div class="center"></div>        
  <div class="right"></div>    
</div>
複製代碼

  • 絕對定位佈局

    • 優勢: 簡單實用，而且主要內容能夠優先加載。
    • 代碼實現
      .container{
    position: relative;
}
.center{
    margin-left: 100px;
    margin-right: 100px;
    height: 100px;
    background: orange;
}
.left{
    position: absolute;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: blue;
 }

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
複製代碼

  • 網格佈局(Grid佈局)

    • 優勢：Grid佈局是一種新的佈局方式，經過建立網格的方式實現佈局。
    • 缺點：須要適配其餘瀏覽器。
    • 代碼實現
      .container{            
  display: grid;            
  grid-template-columns: 100px auto 100px;            
  /*                
      用於設置網格容器的列屬性 其實就至關於列的寬度 當咱們須要幾列展現時                    
      就設置幾個值 這個屬性能夠接收具體數值好比100px 也能夠接收百分比值                    
      表示佔據容器的寬度               
      須要注意的是: 當給容器設定了寬度時 
      grid-template-columns設定的百分比值是以容器的寬度值爲基礎計算的                    
      若是未設置寬度時 會一直向上追溯到設置了寬度的父容器 直到body元素。            
  */            
  grid-template-rows: 100px;            
  /*             
      用於設置網格容器的行屬性 其實就至關於行的高度                 
      其特性與grid-template-columns屬性相似             
  */        
  }        
  .left{            
      background: red;        
  }        
  .center{            
      background :orange;        
  }
  .right{            
      background: blue;        
  }

  <div class="container">        
      <div class="left"></div>        
      <div class="center"></div>        
      <div class="right"></div>    
  </div>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程