三欄式布局

涉及浮動和清除浮動，主要講解“圣杯”和“雙飛翼”兩種解決方法。這兩種方法實現(xiàn)的都是三欄布局，兩邊的盒子寬度固定，中間盒子自適應，它們實現(xiàn)的效果是一樣的，差別在于其實現(xiàn)的思想。

圣杯布局

圣杯：父盒子包含三個子盒子（左，中，右）

• 中間盒子的寬度設置為 width: 100%; 獨占一行；
• 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；

<p>.left {margin-left:-100%;} 把左邊的盒子拉上去</p>
<p>.right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去</p>

• 父盒子設置左右的 padding 來為左右盒子留位置；
• 對左右盒子使用相對布局來占據(jù) padding 的空白，避免中間盒子的內容被左右盒子覆蓋；
  <pre><code></code>
  
  <div class="container">
  <div class="middle">中間彈性區(qū)</div>
  <div class="left">左邊欄</div>
  <div class="right">右邊欄</div>
  </div>
  </code></pre>

雙飛翼布局

雙飛翼：父盒子包含三個子盒子（左，中，右），中間的子盒子里再加一個子盒子。

• 中間盒子的寬度設置為 width: 100%; 獨占一行；
• 使用負邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；
• 在中間盒子里面再添加一個 div，然后對這個 div 設置 margin-left 和 margin-right來為左右盒子留位置；
  <pre><code></code>
  
  <div class="container">
  
  <div class="middle">
  <div class="middle-inner">中間彈性區(qū)</div>
  </div>
  <div class="left">左邊欄</div>
  <div class="right">右邊欄</div>
  </div>
  </code></pre>

圣杯和雙飛翼異同

圣杯布局和雙飛翼布局解決的問題是一樣的，都是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。

• 兩種方法基本思路都相同：首先讓中間盒子 100% 寬度占滿同一高度的空間，在左右兩個盒子被擠出中間盒子所在區(qū)域時，使用 margin-left 的負值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進行一些調整避免中間盒子的內容被左右盒子遮擋。
• 主要區(qū)別在于 如何使中間盒子的內容不被左右盒子遮擋：

<p>1. 圣杯布局的方法：設置父盒子的 padding 值為左右盒子留出空位，再利用相對布局對左右盒子調整位置占據(jù) padding 出來的空位；</p>
<p>2. 雙飛翼布局的方法：在中間盒子里再增加一個子盒子，直接設置這個子盒子的 margin 值來讓出空位，而不用再調整左右盒子。</p>
簡單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個 div，但不用相對布局了，少設置幾個屬性。

利用浮動實現(xiàn)

我自己使用浮動也實現(xiàn)了三欄式布局：左邊盒子左浮動，右邊盒子右浮動，中間盒子利用 margin-left 和 margin-right 來為左右盒子留位置，同時父盒子設置 overflow: auto; 來避免子盒子溢出。
<pre><code></code>

<div class="container">
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>

<div class="middle">中間彈性區(qū)</div>
</div>
</code></pre>
三欄式布局參考下面幾個鏈接:

• <p> CSS三欄布局——中間固定兩邊自適應寬度： w3cplus 的文章，使用了雙飛翼和浮動實現(xiàn)兩側定寬、中間自適應，也實現(xiàn)了兩側自適應、中間定寬</p>
• <p> 簡書 - 圣杯布局和雙飛翼布局（前端面試必看）：只講了圣杯，不過特別詳細</p>
• <p> In Search of the Holy Grail：圣杯布局的來源
  [百度前端學院筆記 - 三欄式布局之雙飛翼與圣杯]</p>
• <p> (http://ife.baidu.com/note/detail/id/1025)：百度前端學院學員的前端學習筆記</p>

三欄式布局涉及到負 magin 和 清除浮動的問題。

負 magin

這里引出了“負 margin”的問題：

• 負margin用法權威指南：The Definitive Guide to Using Negative Margins 的譯文,介紹了負 magin 的一些性質和很多實用技巧
• 簡書 - margin為負值產生的影響和常見布局應用：包括對自身的影響，對文檔流的影響，以及一些在布局中的應用技巧(比如去除列表右邊框，負邊距+定位實現(xiàn)水平垂直居中，去除列表最后一個 li 元素的 border-bottom，多列等高)
• 博客園 - CSS布局奇淫巧計之-強大的負邊距：和上文內容差不多

簡單總結幾點：

1. 不使用 float 的話，負 margin 元素是不會破壞頁面的文檔流。所以如果你使用負 margin 上移一個元素，所有跟隨的元素都會被上移(而 relative 定位的元素則不同，會保留原位置，影響文檔流)。
2. 當 static 元素的 margin-top/margin-left 被賦予負值時，元素將被拉進指定的方向。
3. 如果你設置 margin-bottom/right 為負數(shù)，元素并不會如你所想的那樣向下/右移動，而是將后續(xù)的元素拖拉進來，覆蓋本來的元素。
4. 當元素不存在 width 屬性或者 width: auto
   的時候，負 margin 會增加元素的寬度.
5. margin-top 為負值不會增加高度，只會產生向上位移;margin-bottom 為負值不會產生位移，會減少自身的供 CSS 讀取的高度，影響下方的元素位置；上下相鄰的元素兩者均為負時，效果不疊加，取負值更多的那個效果。

清除浮動

清除浮動主要是為了解決高度塌陷問題。而簡單的 clear: both
并不能解決這個問題，所以引出了許多解決方案。
StackOverflow - What methods of ‘clearfix’ can I use?：清除浮動黑科技完整解讀
那些年我們一起清除過的浮動：神文，把“清除浮動”定義為“閉合浮動”，把問題由來和解決方案都講清楚了，并且分析了各種解決方案的優(yōu)劣。

各種解決方案在上面的鏈接里有很詳細的說明了，這里就不贅述了。大體分為兩類：

1. 其一，通過在浮動元素的末尾添加一個空元素，設置 clear: both
   屬性，after 偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；
2. 其二，通過設置父元素 overflow
   或者 display: table
   屬性來閉合浮動

順便補充一句，clear float(例如 clear: left) 是對某個元素設置，以避免其某一邊有浮動元素，即對當前元素產生約束，約束的邊界為其他的浮動元素。對于已經浮動的元素，設置 clear float 是無效的。

居中布局

• Centering in CSS: A Complete Guide：非常全面的居中定位博客，包括各種情況下的水平居中，垂直居中和水平垂直居中方案。有展示示例及相應的 HTML 和 CSS 代碼
  文章大致結構：

• 水平居中對于行內元素(inline)：text-align: center;
• 對于塊級元素(block)：設置寬度且 marigin-left
  和 margin-right
  是設成 auto
• 對于多個塊級元素：對父元素設置 text-align: center;
  ，對子元素設置 display: inline-block;
  ；或者使用 flex 布局
• 垂直居中
• 對于行內元素(inline)
  • 單行：設置上下 pandding 相等；或者設置 line-height
    和 height
    相等
  • 多行：設置上下 pandding 相等；或者設置 display: table-cell;
    和 vertical-align: middle;
    ；或者使用 flex 布局；或者使用偽元素
• 對于塊級元素(block)：下面前兩種方案，父元素需使用相對布局
  • 已知高度：子元素使用絕對布局 top: 50%;
    ，再用負的 margin-top
    把子元素往上拉一半的高度
  • 未知高度：子元素使用絕對布局 position: absolute; top: 50%; transform: translateY(-50%);
  • 使用 Flexbox：選擇方向，justify-content: center;
• 水平垂直居中
  • 定高定寬：先用絕對布局 top: 50%; left: 50%;
    ，再用和寬高的一半相等的負 margin 把子元素回拉
  • 高度和寬度未知：先用絕對布局 top: 50%; left: 50%;
    ，再設置 transform: translate(-50%, -50%);
  • 使用 Flexbox：justify-content: center; align-items: center;

響應式設計

“響應式設計（Responsive Design)” 是一種讓網(wǎng)站針對不同的瀏覽器和設備“呈現(xiàn)”不同顯示效果的策略。
媒體查詢(Media Queries)是做此事所需的最強大的工具。
注： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD
RWD：

• 采用 CSS 的 media query 技術
• 流體布局（fluid grids）
• 自適應的圖片/視頻等資源素材
  （為小、中、大屏幕做一些優(yōu)化，目的是讓任何尺寸的屏幕空間都能得到充分利用）

AWD：

• CSS media query 技術（僅針對有限幾種預設的屏幕尺寸設計）
• 用 JavaScript 來操作 HTML 內容
• 在服務器端操作 HTML 內容（比如為移動端減少內容，為桌面端提供更多內容）

Flexbox 布局

Flexbox 布局參考下面幾篇文章就可以了，幾篇文章大同小異，看一兩篇就知道大概了，講的挺詳細的，在此不贅述

• w3cplus - 一個完整的Flexbox指南：A Complete Guide to Flexbox 的譯文
• SegmentFault - Flexbox詳解
• w3cplus - 圖解CSS3 Flexbox屬性
• w3cplus - Flexbox——快速布局神器