經典問題之---網頁三欄佈局

時間 2019-11-10

標籤經典問題網頁佈局欄目 HTML 简体版

原文原文鏈接

重寫於 2018-02-25，大部分參考於 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

1. 流體佈局

簡單來講就是 -- 兩邊浮動，中間設置 margin
htmlphp

<div class="wrap">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

csscss

* {
  margin: 0;
  padding: 0;
}
.left, .right, .main {
  height: 300px;
}
.left {
  width: 200px;
  float: left;
  background-color: #089e8a;
}
.right {
  float: right;
  width: 200px;
  background-color: #19f;
}
.main {
  margin-left: 250px;
  margin-right: 250px;
  background-color: #080;
}

2. BFC佈局

什麼是BFC？
個人答案參考於：http://www.php.cn/div-tutorial-371936.htmlhtml

BFC區域，不會與浮動元素重疊。

BFC定義：(Block Formatting Contexts)塊級格式上下文，是一個獨立渲染的區域。瀏覽器

它是一個獨立的盒子。獨立盒子內部的佈局不受外部的影響，也不影響外部。是否是和absolute的哲學有點類似！佈局
BFC解決了什麼問題？看一下這個例子(同一個BFC中會出現)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;padding: 0;
    }
    .p1 {
      background-color: #FCE38A;
      width: 200px;
      height: 100px;
      margin-bottom: 50px;
    }
    .p2 {
      background-color: #EAFFD0;
      width: 200px;
      height: 100px;
      margin-top: 50px;
    }
    .p3 {
      background-color: #95E1D3; 
      width: 200px; 
      height: 100px;
    }
  </style>
</head>
<body>
  <p class="p1"></p>
  <p class="p2"></p>
  <p class="p3"></p>
</body>
</html>

1.沒有設置margin值的時候，你們是這樣的。

2.在 p1 和 p2 分別設置了 50px 的 margin 以後，是這樣的。

3.在這裏出現了外邊距合併的現象，並無出現 100px 的距離。這就是BFC要解決的問題。flex

BCF規則
- 內部的box會在垂直方向，從頂部開始一個接着一個地放置（上面的例子能夠看出）
- 同一個BFC中，在兩個相鄰的塊級元素中，垂直margin會發生摺疊
- 每一個元素的margin box的左邊，與包含塊border box的左邊相接,對於從左往右的格式化，不然相反)，即便存在浮動也是如此
- BFC的區域不會與float box重疊
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然
- 計算BFC的高度時，浮動元素也參與計算
如何觸發BFC？前綴是 根元素
- float屬性不爲none（如：left | right）
- overflow的值不爲visible（如：hidden | auto | scroll）
- display屬性值爲inline-block | flex | inline-flex | table-cell | table-caption
- position爲absolute或fixed
應用BFC，解決 margin重疊問題(上例中 body 元素就是一個BFC)
- 根據規則:同一個BFC中，在兩個相鄰的塊級元素中，垂直margin會發生摺疊flexbox
  
  因此咱們給p1設置display:inline-block，讓其不爲block
  
  此時因爲p1元素經過display:inline-block觸發了BFC，此時的p1就是一個獨立的BFC了，根據規則BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然3d

清除浮動亦可以使用BFC原理，具體還請看外鏈：http://www.php.cn/div-tutorial-371936.html

總結：BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，一樣的，外面的元素也不會影響到容器裏面的子元素。code

BFC佈局方式的三列
cssorm

* {
  margin: 0;
  padding: 0;
}
.left {
  float: left;
  height: 200px;
  width: 200px;
  margin-right: 50px;
  background-color: #fce38a;
}
.right {
  float: right;
  height: 200px;
  width: 200px;
  margin-left: 50px;
  background-color: #eaffd0;
}
.main {
  height: 200px;
  overflow: hidden;
  background-color: #95e1d3;
}

html

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

3. 雙飛翼佈局

特色是：主內容優先加載。原理是：浮動元素 margin 負值的應用。

css

* {
  margin: 0;
  padding: 0;
}
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 250px;
  margin-right: 250px;
  background-color: #95e1d3;
}
.left {
  float: left;
  margin-left: -100%;
  width: 200px;
  height: 200px;
  background-color: #fce38a;
}
.right{
  float: left;
  margin-left: -200px;
  width: 200px;
  height: 200px;
  background-color: #eaffd0;
}

html

<div class="content">
  <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

4. 聖盃佈局

聖盃佈局和雙飛翼佈局很像。。能夠說是雙飛翼改！！ html結構簡單了，css複雜些

當我把中間層的 `margin`去掉後，我發現(我的發現，僅作參考或者不看)：

聖盃用padding，雙飛翼用margin

雙飛翼佈局的中間佔了全屏。可是兩邊被遮擋了。彷彿是兩個翅膀擋住了中間。
聖盃佈局的中間佔了全屏。把兩邊也一塊兒這該住了。彷彿是兩個側邊將中間頂到了最上層。

css

* {
  margin: 0;
  padding: 0;
}
.container {
  padding: 0 250px;
}
.main {
  float: left;
  width: 100%;
  height: 200px;
  background-color: #95e1d3;
}
.left {
  position: relative;
  left: -250px;
  margin-left: -100%;
  float: left;
  width: 200px;
  height: 200px;
  background-color: #fce38a;
}
.right {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  background-color: #eaffd0;
  margin-left: -200px;
  left: 250px;
}

html

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

5. Flex 佈局

時代在變化！！瀏覽器兼容，看見我就慫。

先看實現吧，優雅簡單。
css

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.main {
  flex-grow: 1;
  height: 300px;
  background-color: #95e1d3;
}
.left {
  order: -1;
  flex: 0 1 200px;
  margin-right: 50px;
  height: 300px;
  background-color: #fce38a;
}
.right {
  flex: 0 1 200px;
  margin-left: 50px;
  height: 300px;
  background-color: #eaffd0;
}

html

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

簡稱「彈性盒子」，除了用於實現彈性佈局，還能夠用來居中內容。改變標記中的源碼順序。

！！！！ IE9 如下瀏覽器不支持不支持不支持 FlexBox

相關標籤/搜索

每日一句

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

經典問題之---網頁三欄佈局

重寫於 2018-02-25，大部分參考於 https://zhuanlan.zhihu.com/p/25070186?refer=learncoding

1. 流體佈局

2. BFC佈局

BFC區域，不會與浮動元素重疊。

清除浮動亦可以使用BFC原理，具體還請看外鏈：http://www.php.cn/div-tutorial-371936.html

3. 雙飛翼佈局

4. 聖盃佈局

當我把 中間層 的 margin去掉後，我發現(我的發現，僅作參考或者不看)：

5. Flex 佈局

簡稱「彈性盒子」，除了用於實現彈性佈局，還能夠用來居中內容。改變標記中的源碼順序。

！！！！ IE9 如下瀏覽器 不支持 不支持 不支持 FlexBox

當我把中間層的 `margin`去掉後，我發現(我的發現，僅作參考或者不看)：

！！！！ IE9 如下瀏覽器不支持不支持不支持 FlexBox