實現三欄佈局的六種方式

時間 2019-12-05

標籤實現佈局方式简体版

原文原文鏈接

本文轉載（https://www.jianshu.com/p/3046eb050664）瀏覽器

六種佈局方式：聖盃佈局、雙飛翼佈局、Flex佈局、絕對定位佈局、表格佈局、網格佈局佈局

一.聖盃佈局flex

聖盃佈局是指佈局從上到下分爲header、container、footer，而後container部分定爲三欄佈局。spa

基礎HTML：　　code

 1 <body>
 2     <div class="container">
 3         <!-- 優先渲染 -->
 4         <div class="center">
 5             center
 6         </div>
 7         <div class="left">
 8             left
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

基礎CSS：blog

 1  .container {
 2      overflow: hidden;
 3  }
 4  .container > div {
 5      position: relative;
 6      float: left;
 7      height: 100px;
 8  }
 9  .center {
10      width: 100%;
11      background-color: red;
12  }
13  .left {
14      width: 200px;
15      background-color: green;
16  }
17  .right {
18      width: 200px;
19      background-color: blue;
20  }

對於container，給他設置一個overflow:hidden使其成爲一個BFC（塊級格式化上下文）。BFC的做用: 排序

1.消除Margin Collapseget

2.容納浮動元素it

3.阻止文本換行io

使三欄浮動，並相對定位，給左右兩個容器設置200px的寬度，中間的容器設置100%的寬度。此時left和right被相對於父元素container寬度的100%的center擠到下面。

步驟：

1.發left放在center上方：因爲浮動的緣由，給left設置margin-left:100%便可使左側欄浮動到center上方，並位於center左側之上。

2.一樣設置right margin-left:-200px,這裏的長度等於right的長度。

3.這時center的兩側被left和right覆蓋了，所以給container設置padding：0 200px

4.因爲left和right也同時往中間縮，由於給left和right分別設置left:-200px;right:-200px,往兩側分別偏移自身的寬度去覆蓋掉contaniner使用padding後的空白位置。

這時，聖盃佈局就完成了，可是在拖到很小的時候佈局會亂，一下是最終樣式：

.container {
  overflow: hidden;
  padding: 0 200px;
}
.container > div {
  position: relative;
  float: left;
  height: 100px;
}
.center {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  margin-left: -100%;
  left: -200px;
}
.right {
  width: 200px;
  background-color: blue;
  margin-left: -200px;
  right: -200px;
}

二.雙飛翼佈局

這種佈局方式一樣分爲header、container、footer。聖盃佈局的缺陷在於center是在container的padding中的，所以寬度小的時候會出現混亂。

雙飛翼佈局給center部分報過了一個main，經過設置margin主動的把頁面撐開。

基礎HTML：

 1 <div class="container">
 2   <!-- 優先渲染 -->
 3   <div class="center">
 4     <div class="main">
 5       center
 6     </div>
 7   </div>
 8   <div class="left">
 9     left
10   </div>
11   <div class="right">
12     right
13   </div>
14 </div>

步驟1和步驟2同聖盃佈局

區別：

第三步：給main設置margin：0 200px，同時設置overflow：hidden，使其成爲一個BFC。

這時窗口寬度太小時就不會出現混亂的狀況了，關鍵點在於內容部分是包裹在main中。

最終樣式以下：

 1 .container {
 2   overflow: hidden;
 3 }
 4 .container > div {
 5   position: relative;
 6   float: left;
 7   height: 100px;
 8 }
 9 .center {
10   width: 100%;
11   background-color: red;
12 }
13 .left {
14   width: 200px;
15   background-color: green;
16   margin-left: -100%;
17 }
18 .right {
19   width: 200px;
20   background-color: blue;
21   margin-left: -200px;
22 }
23 .main {
24   height: 100%;
25   margin: 0 200px;
26   background-color: rosybrown;
27   overflow: hidden;
28 }

3.Flex佈局

Flex佈局是由CSS3提供的一種方便的佈局方式。

基礎HTML：同聖盃佈局

步驟：

1.給container設置爲一個flex容器：display：flex

2.center的寬度設置爲width：100%，left和right設置爲200px

3.爲了避免讓left和right被center設置的100%壓縮，給left和right設置flex-shrink：0（定義項目的縮小比例，默認爲1，若是空間不足則項目縮小，若是有一項爲0，其餘爲1，當空間不足時，前者不縮小）。

4.使用order屬性給三個部分的DOM結構進行排序：left：order：1，center:order:2,right:order:3

flex佈局是一種極其靈活的佈局方式，最終樣式以下：（flex存在瀏覽器兼容性）

 1 .container {
 2   display: flex;
 3 }
 4 .center {
 5   background-color: red;
 6   width: 100%;
 7   order: 2;
 8 }
 9 .left {
10   background-color: green;
11   width: 200px;
12   flex-shrink: 0;
13   order: 1;
14 }
15 .right {
16   background-color: blue;
17   width: 200px;
18   flex-shrink: 0;
19   order: 3;
20 }

4.絕對定位佈局

基礎HTML和聖盃佈局同樣。

步驟：

1.給container設置position：relative和overflow：hidden，由於絕對定位的元素的參照物爲第一個position不爲static的祖先元素。

2.left向左浮動，right向右浮動。

3.center使用絕對定位，經過設置left和right把兩邊撐開。

4.center設置top：0，bottom:0使其高度撐開。

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
}

這種方式的缺點是依賴於left和right的高度，若是兩邊欄的高度不夠，中間的內容區域的高度也會被壓縮。

5.table-cell 佈局

表格佈局的好處是能使三欄的高度統一。

基礎HTML：

 1 <body>
 2     <div class="container">
 3         <div class="left">
 4             left
 5         </div>
 6         <!-- 這時的center要放在中間 -->
 7         <div class="center">
 8             center
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

步驟：

1.給三欄都設置表格單元：display：table-cell

2.left和right width:200px , center width:100%

3.這時left和right都被到兩邊去了，所以要分別設置min-widht：200px 確保不會被擠壓。

最終樣式：

 1   .container {
 2         overflow: hidden;
 3         position: relative;
 4     }
 5     .container > div {
 6         display: table-cell;
 7         height: 100%;
 8     }
 9     .center {
10         margin: 0 200px;
11         width: 100%;
12         background: red;
13     }
14     .left {
15         width: 200px;
16         min-width: 200px;
17         background-color: green;
18     }
19     .right {
20         width: 200px;
21         min-width: 200px;
22         background-color: blue;
23     }

這種佈局方式能使得三欄的高度是統一的，但不能使center放在最前面獲得最早渲染。

6.網格佈局

網格佈局多是最強大的佈局方式了，使用起來極其方便，但目前而言，兼容性很差。網格佈局，能夠將頁面分割成過個區域，或者用來定義內部元素的大小，位置，圖層關係。

基礎HTML：

 1 <body>
 2     <div class="container">
 3         <div class="left">
 4             left
 5         </div>
 6         <!-- 這時的center要放在中間 -->
 7         <div class="center">
 8             center
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

步驟：

1.給container設置爲display：grid

2.設置三欄的高度：grid-template-rows：100px

3.設置三欄的寬度，中間自適應，兩邊固定：grid-template-columns：200px auto 200px；

.container {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
}

僅這四條樣式命令就能完成三欄佈局，可見網格佈局之強大。

總結：

1.聖盃佈局、雙飛翼佈局、flex佈局的center高度不受兩邊影響，取決於其自身內容所佔高度。

2.絕對佈局center高度取決於兩側的高度(由於是經過設置top：0，bottom:0 把高度撐開的)

3.table-cell佈局能讓三欄高度統一，可是不能優先渲染center

4.網格佈局也不能優先渲染center，但佈局簡單，存在兼容性問題。

5.flex佈局也存在兼容性問題。

6.聖盃佈局在頁面縮小時會出現錯亂問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。