聊聊三欄佈局

閒時要有吃緊的心思，忙時要有清閒的趣味。

目錄

• 前言

• 正文

  • 1、Float佈局
  • 2、Position佈局
  • 3、Table佈局
  • 4、Flex佈局
  • 5、Grid佈局

• 總結

前言

返回目錄

 對於前端來講，佈局是必須掌握的，一個好的佈局可讓頁面看起來更美觀。提到佈局，那就不得不說CSS三欄佈局。

 三欄佈局通常多指左右兩欄寬度固定，中間欄寬度自適應的佈局。在能實現效果的狀況下，儘量的中間欄內容優先渲染。面試的時候常常被問到，在這裏總結一下

正文

 咱們不妨假定這樣一個佈局：高度已知((設高度爲200px))，其中左欄、右欄寬度各爲300px,中間自適應，能夠經過幾種方法來實現？以及各自的優缺點是什麼？

 常見的佈局方式: float佈局、Position定位、table佈局、彈性(flex)佈局、網格(grid)佈局

方便起見，先寫一些公用的樣式：

<!-- 公共樣式 -->
<style>
  .clear_fix:after {
    content: '';
    display: flex;
    clear: both;
  }

  .left,
  .middle,
  .right {
    height: 200px;
  }

  .left {
    background-color: red;
    width: 300px;
  }

  .middle {
    background-color: green;
  }

  .right {
    background-color: yellow;
    width: 300px;
  }
</style>
複製代碼

1、Float佈局

返回目錄

方案

左右中三列，左列左浮動，右列右浮動，中間列設置左右margin

原理

float屬性定義元素在哪一個方向浮動，它最初的設計的初衷是爲了解決文字環繞的問題 ，即給一個圖片設置float屬性以後會使文字環繞在圖片周圍顯示。
float之因此能夠實現文字環繞，是由於設置float屬性的元素能夠脫離文檔流，使父元素高度塌陷。
若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。

 話很少說上代碼：

<!-- float解決方案 -->
<main class="content_float main_content clear_fix">
  <div class="left">
    <p>left</p>
  </div>
  <div class="right">
    <p>right</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>float解決方案</h1>
  </div>
</main>
<style> .content_float { min-width: 700px; } .content_float .left { float: left; } .content_float .middle { margin-left: 300px; margin-right: 300px; } .content_float .right { float: right; } </style>
複製代碼

注意事項

1. 父元素設置最小寬度

   若是父元素的寬度小於兩側子元素固定寬度的和（600px），右側元素就會被擠到下面去，因此咱們須要設置最小寬度。

2. 中間元素設置margin-left、和margin-right

   若是動手寫這個代碼的小夥伴會發現不設置這兩個屬性效果在中間元素內容比較少的時候效果是正常的，可是若是若是中間元素的子元素內容特別多的時候會擠到左右元素的下面去

3. 清除浮動

   因爲咱們使用了float, 因此爲了避免影響其餘元素的顯示這裏須要爲父元素添加clear_fix的類名用來清除浮動(具體代碼見公共樣式)。

2、Position佈局

返回目錄

方案

左中右三列（無順序），根據定位屬性去直接設置各個子元素位置

原理

position能夠設置元素定位類型，其屬性有5種 :

inherit: 繼承父元素的position屬性值

  static: 默認值，沒有定位

  fixed: 生成絕對定位的元素,相對於瀏覽器窗口進行定位（無論屏幕內容怎麼滑動,其位置不會改變）

  relative:生成相對定位,相對於其正常位置進行定位

  absolute:生成絕對定位的元素,至關於static定位之外的第一個父元素進行定位。
複製代碼

根據以上內容咱們能夠看出咱們須要選擇給 左 中 右 都使用 absolute 絕對定位，因爲absolute 是至關於static定位之外的第一個父元素進行定位，因此咱們要給其父元素添加 position:relative屬性, 這樣這三個子元素能夠相對於父元素進行絕對定位。

 話很少說上代碼：

<!-- posstion解決方案 -->

<main class="content_posstion main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>position解決方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_posstion { position: relative; } .content_posstion .left { position: absolute; left: 0; } .content_posstion .right { position: absolute; right: 0; } .content_posstion .middle { position: absolute; left: 300px; right: 300px; } </style>
複製代碼

3、Table佈局

返回目錄

方案

左中右三列，父元素display: table;子元素display: table-cell;居中子元素不設寬度

原理

table是一種常見的佈局方式,他能夠將整個頁面按照表格的方式設置爲多行多列,可是因爲書寫table標籤比較麻煩尤爲是涉及到table內嵌table的時候，因此CSS給咱們提供了display: table的方式可讓咱們方便的使用table佈局, 設置子元素爲列的屬性display:table-cell

 話很少說上代碼：

<!-- table解決方案 -->

<main class="content_table main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>table解決方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_table { width: 100%; display: table; } .content_table>div { display: table-cell; } </style>
複製代碼

4、Flex佈局

返回目錄

方案

左中右三列，父元素display: flex;居中子元素flex: 1;

原理

flex佈局是W3C提出了一種新的方案，能夠簡便、完整、響應式地實現各類頁面佈局。
當給元素設置display:flex，則該元素就是一個flex容器,其子元素就是容器成員,稱之爲flex項目,每一個項目默認按照從左到右方式排列。
詳情可參考阮一峯老師的——Flex 佈局教程

 話很少說上代碼：

<!-- flex解決方案 -->

<main class="content_flex main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>flex解決方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_flex { display: flex; } .content_flex .middle { flex: 1; } </style>
複製代碼

注意事項

5、Grid佈局

返回目錄

概要

方案

左中右三列，父元素display: grid;利用網格實現

原理

網格佈局（Grid）是最強大的 CSS 佈局方案。
網格它將網頁劃分紅一個個網格，能夠任意組合不一樣的網格，作出各類各樣的佈局。
將屬性 display 值設爲grid 或 inline-grid, 就建立了一個網格容器，全部容器直接子結點自動成爲網格項目。
gird提供了gird-template-columns、grid-template-rows屬性讓咱們設置行和列的高、寬，只須要四行CSS代碼就能夠實現三欄佈局,是否是感受到了gird的強大之處呢
詳情可參考阮一峯老師的——CSS Grid 網格佈局教程

 話很少說上代碼：

<!-- grid解決方案 -->

<main class="content_grid main_content">
  <div class="left">
    <p>left</p>
  </div>
  <div class="middle">
    <p>middle</p>
    <h1>grid解決方案</h1>
  </div>
  <div class="right">
    <p>right</p>
  </div>
</main>
<style> .content_grid { width: 100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } </style>
複製代碼

總結

返回目錄

 以上提供了5種實現三欄佈局的方式那麼他們的優缺點呢？咱們作張表格對比一下

佈局方案	優勢	缺點
Float佈局	比較簡單，兼容性也比較好	浮動元素脫離文檔流，使用的時候只須要注意必定要清除浮動。
Position佈局	快捷，設置很方便	元素脫離了文檔流，後代元素也脫離了文檔流，高度未知的時候，會有問題，有效性和可以使用性比較差
Table佈局	使用起來方便,兼容性也不存在問題	①沒法設置欄邊距；②對seo不友好；③當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一塊兒變高的
Flex佈局	比較完美	存在IE上兼容性問題，只能支持到IE9以上
Grid佈局	最強大和最簡單	兼容性很差

 經過介紹五種佈局的優缺點，在實際開發中最優選擇哪一種佈局？相信你們心中會有本身的答案。

 我以爲flex和grid佈局就能夠搞定實際開發中的佈局，假設瀏覽器都支持這兩個模塊，你將選擇grid仍是flexbox來給頁面佈局？

 flexbox是一維佈局，他只能在一條直線上放置你的內容區塊；而grid是一個二維佈局。前面也簡單說到，你能夠根據你的設計需求，將內容區塊放置到任何你想要放的地方。此外，若是要兼容低版本的IE(好比IE8+)，能夠考慮table佈局。

 最後問你們一個問題，若是中間部分被內容高度撐開，須要左右欄也撐開，這五種佈局哪些佈局還能夠用？

 答案：flex佈局和table佈局

• 參考文獻：

1. CSS實現三欄佈局(5種)
2. css實現三欄佈局的幾種方法及優缺點

後記：Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址

文檔協議

db 的文檔庫 由 http://www.javashuo.com/tag/db 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/danygitgit上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。