CSS三欄佈局方法及其分析

前言

相信很多同學在面試的時候遇到過三欄佈局的問題，一般面試題會讓你儘可能多的寫出三欄佈局的方法，本篇小記對三欄佈局的一些主流方法，做一些總結和分析。不正之處，歡迎指點！

正文

1.絕對定位法

html如下：

<div class="container">
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

css如下：

    * {
      margin: 0;
      padding: 0;
    }
    html, body{
      height: 100%;
    }
    .container{
      position: relative;
      height: 100%;
    }
    .left{
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 100%;
      background: red;
    }
    .center{
      position: absolute;
      top: 0;
      left: 300px;
      right: 300px;
      height: 100%;
      background: green;
    }

    .right{
      position: absolute;
      top: 0;
      right: 0;
      width: 300px;
      height: 100%;
      background: blue;
    }

分析：

缺點：

1.當設置中間區域center的寬度存在最小寬度時，元素會發生重疊效果（如圖1-1）；

2.當瀏覽器寬度無限縮小時，中間區域會消失，右側區域會與左側區域發生重疊，右側覆蓋左側（如圖1-2）；

3.不同瀏覽器最小寬度下顯示的層疊效果也有差異（如圖1-3）；

（圖1-1）

（圖1-2）

（圖1-3）

2.浮動佈局

浮動方法1

html如下：

<div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>

css如下：

* {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .left{
      float: left;
      width: 300px;
      height: 100%;
      background: red;
    }
    .center{
      margin: 0 300px;
      height: 100%;
      background: green;
    }
    .right{
      float: right;
      width: 300px;
      height: 100%;
      background: blue;
    }

分析：

注意HTML結構，這是較爲簡單的佈局，左側左浮動，右側右浮動，中間流式自適應

缺點

1.不同瀏覽器最小寬度下顯示的層疊效果也有差異（如圖2-1）

（圖2-1）

浮動方法2

html如下：

  <div class="right"></div>
  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
  </div>

css如下：

* {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }

    .container {
      height: 100%;
      margin-right: 300px;
    }

    .left {
      float: left;
      width: 300px;
      height: 100%;
      background: red;
    }

    .center {
      margin-left: 300px;
      min-width: 200px;
      height: 100%;
      background: green;
    }

    .right {
      float: right;
      width: 300px;
      height: 100%;
      background: blue;
    }

分析：

採用兩欄佈局思路，注意HTML結構。

（1）先將右側元素右浮動，左側元素和中間元素用container包住作 “流式佈局”，因爲塊元素div默認會佔滿整個容器寬度，設置container的margin-right: 300px給右側元素留出空間；

（2）左側左浮動；右側繼續使用 “流式佈局” 思想，center元素不設置寬度，則塊元素 center 默認佔滿整個容器寬度，並且設置margin-left: 300px給左側元素留出空間；

缺點

1.當瀏覽器寬度無限縮小時，左側元素會覆蓋右側元素，部分瀏覽器中間自適應元素會消失（即使中間元素設置了最小寬度）（如圖2-2）。

2.不同瀏覽器最小寬度下顯示的層疊效果也有差異（如圖2-3）；

3.查看不同瀏覽器的差異，Edge和火狐瀏覽器佈局完全錯亂

（如圖2-2）

（如圖2-3）

3.聖盃佈局

html如下：

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

css如下：

* {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .container {
      margin: 0 300px;
      height: 100%;
    }

    .center {
      float: left;
      width: 100%;
      height: 100%;
      background: green;
    }

    .left {
      float: left;
      margin-left: -100%;

      position: relative;
      left: -300px;

      width: 300px;
      height: 100%;
      background: red;
    }

    .right {
      float: left;
      margin-left: -300px;

      position: relative;
      right: -300px;

      width: 300px;
      height: 100%;
      background: blue;
    }

分析

(1)首先設置 container 左右外邊距，左側元素與右側元素的空間留出

(2)中間元素設置寬度100%，佔滿設置外邊距的容器

(3)左側元素設置float: left; margin-left： -100%;（這個-100%指的是父元素的整體寬度），那麼left元素將會從container的起始位置開始排布，再設置position: relative; left: -300px;, 在原有位置再向左位移300px

(4)右側思路同上，設置right左浮動，位移 -300px讓出原有佔有的位置，使得right元素的右側與container元素的右側重合，再右移300px

缺點

1.瀏覽器寬度無限縮小，測試的四大瀏覽器中，只有opera瀏覽器右側元素消失，其他瀏覽器排佈會錯亂（如圖3-1）

（如圖3-1）

4.雙飛翼佈局

html如下：

<div class="container">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

css如下：

* {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    .container{
      float: left;
      width: 100%;
      height: 100%;
    }
    .center{
      margin: 0 300px; 
      height: 100%;
      background: green;
    }
    .left{
      float: left;
      margin-left: -100%;
      
      width: 300px;
      height: 100%;
      background: red;
    }
    .right{
      float: left;
      margin-left: -300px;
      width: 300px;
      height: 100%;
      background: blue;
    }

分析

(1)浮動container佔滿整個容器，內部設置center外邊距，center默認佔滿剩下空間

(2)左側左浮動，設置margin-left: -100%;釋放原有佔位空間，使得left上移至container起始位置

(3)右側元素亦然，設置margin-left: -300px;釋放原有佔位空間，使得right上移，right元素右側與container右側融合

（如圖4-1）

5.Flex佈局

html如下：

  <div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

css如下：

    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }

    .container {
      display: flex;
      height: 100%;
    }

    .left {
      /* flex-shrink : 默認值是 1,表示空間不足允許收縮。設置爲0，空間不足也不允許收縮 */
      flex-shrink: 0;
      width: 300px;
      height: 100%;
      background: red;
    }

    .center {
      flex: 1;
      background: green;
    }

    .right {
      flex-shrink: 0;
      width: 300px;
      height: 100%;
      background: blue;
    }

分析：

(1)使用彈性盒子模型進行佈局，左右定寬，中間自適應只需要設置 flex: 1;

(2) flex屬性是flex-grow, flex-shrink 和flex-basis的簡寫，默認值爲 0 1 auto。後兩個屬性可選

(3)不設置 flex-shrink: 0左側元素與右側元素會發生部分重疊，中間元素會消失

(4)設置 flex-shrink: 0，當瀏覽器寬度無限縮小時，中間元素消失，左側右側元素不會重疊，瀏覽器橫向會出現滑動條（如圖3-1）；

（圖5-1）

綜上所述：在三欄佈局中，彈性盒子佈局方式相對較爲穩定，但Flex存在兼容性問題，使用時請注意。

掘金首次發文，若有遺誤，懇請指點，感謝！

CSS三欄佈局方法及其分析

前言

正文

1.絕對定位法

2.浮動佈局

浮動方法1

分析：

浮動方法2

分析：

3.聖盃佈局

分析

4.雙飛翼佈局

分析

5.Flex佈局

分析：

Handsontable使用教程含授權碼LicenseKey

Compare two HTML sources and display visual differences

理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型

原生js實現平滑滾動

@vue/cli vue create初始化項目時使用yarn安裝依賴

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結