摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。

標(biāo)簽 ： 前端

[TOC]

本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)lexbox 布局，等等。

下面幾個入門教程不錯：

幕課網(wǎng) - HTML+CSS基礎(chǔ)課程：偏基礎(chǔ)，可以在線練習(xí)和預(yù)覽

MDN - CSS入門教程: MDN 的官方文檔

學(xué)習(xí) CSS 布局：排版和配色特別舒服，簡短但不深入，適合概覽入門

主要就是經(jīng)典的絕對定位，相對定位問題。

10個文檔學(xué)布局：通過十個例子講解布局，主要涉及相對布局，絕對布局，浮動。

百度前端學(xué)院筆記 - 理解絕對定位：文章本身一般，幾篇參考文獻(xiàn)比較詳細(xì)

HTML和CSS高級指南之二——定位詳解（譯文）：介紹浮動的使用，詳細(xì)介紹定位的技巧，包括如何準(zhǔn)確的給元素在 X 軸、Y 軸和 Z 軸定位

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

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

中間盒子的寬度設(shè)置為 width: 100%; 獨(dú)占一行；

使用負(fù)邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；

.left {margin-left:-100%;} 把左邊的盒子拉上去

.right {margin-left：-右邊盒子寬度px;} 把右邊的盒子拉上去

父盒子設(shè)置左右的 padding 來為左右盒子留位置；

對左右盒子使用相對布局來占據(jù) padding 的空白，避免中間盒子的內(nèi)容被左右盒子覆蓋；

    
    
中間彈性區(qū)
    
左邊欄
    
右邊欄

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

中間盒子的寬度設(shè)置為 width: 100%; 獨(dú)占一行；

使用負(fù)邊距(均是 margin-left)把左右兩邊的盒子都拉上去和中間盒子同一行；

在中間盒子里面再添加一個 div，然后對這個 div 設(shè)置 margin-left 和 margin-right來為左右盒子留位置；

    
    

         
中間彈性區(qū)
    
    
左邊欄
    
右邊欄

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

兩種方法基本思路都相同：首先讓中間盒子 100% 寬度占滿同一高度的空間，在左右兩個盒子被擠出中間盒子所在區(qū)域時，使用 margin-left 的負(fù)值將左右兩個盒子拉回與中間盒子同一高度的空間。接下來進(jìn)行一些調(diào)整避免中間盒子的內(nèi)容被左右盒子遮擋。

主要區(qū)別在于 如何使中間盒子的內(nèi)容不被左右盒子遮擋：

圣杯布局的方法：設(shè)置父盒子的 padding 值為左右盒子留出空位，再利用相對布局對左右盒子調(diào)整位置占據(jù) padding 出來的空位；

雙飛翼布局的方法：在中間盒子里再增加一個子盒子，直接設(shè)置這個子盒子的 margin 值來讓出空位，而不用再調(diào)整左右盒子。

簡單說起來就是雙飛翼布局比圣杯布局多創(chuàng)建了一個 div，但不用相對布局了，少設(shè)置幾個屬性。

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

    
左邊欄
    
右邊欄
    
    
中間彈性區(qū)

三欄式布局參考下面幾個鏈接:

CSS三欄布局——中間固定兩邊自適應(yīng)寬度： w3cplus 的文章，使用了雙飛翼和浮動實(shí)現(xiàn)兩側(cè)定寬、中間自適應(yīng)，也實(shí)現(xiàn)了兩側(cè)自適應(yīng)、中間定寬

簡書 - 圣杯布局和雙飛翼布局（前端面試必看）：只講了圣杯，不過特別詳細(xì)

In Search of the Holy Grail：圣杯布局的來源

百度前端學(xué)院筆記 - 三欄式布局之雙飛翼與圣杯：百度前端學(xué)院學(xué)員的前端學(xué)習(xí)筆記

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

這里引出了“負(fù) margin”的問題：

負(fù)margin用法權(quán)威指南：The Definitive Guide to Using Negative Margins 的譯文,介紹了負(fù) magin 的一些性質(zhì)和很多實(shí)用技巧

簡書 - margin為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用：包括對自身的影響，對文檔流的影響，以及一些在布局中的應(yīng)用技巧(比如去除列表右邊框，負(fù)邊距+定位實(shí)現(xiàn)水平垂直居中，去除列表最后一個 li 元素的 border-bottom，多列等高)

博客園 - CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距：和上文內(nèi)容差不多

簡單總結(jié)幾點(diǎn)：

不使用 float 的話，負(fù) margin 元素是不會破壞頁面的文檔流。所以如果你使用負(fù) margin 上移一個元素，所有跟隨的元素都會被上移(而 relative 定位的元素則不同，會保留原位置，影響文檔流)。

當(dāng) static 元素的 margin-top/margin-left 被賦予負(fù)值時，元素將被拉進(jìn)指定的方向。

如果你設(shè)置 margin-bottom/right 為負(fù)數(shù)，元素并不會如你所想的那樣向下/右移動，而是將后續(xù)的元素拖拉進(jìn)來，覆蓋本來的元素。

當(dāng)元素不存在 width 屬性或者 width: auto 的時候，負(fù) margin 會增加元素的寬度.

margin-top 為負(fù)值不會增加高度，只會產(chǎn)生向上位移;margin-bottom 為負(fù)值不會產(chǎn)生位移，會減少自身的供 CSS 讀取的高度，影響下方的元素位置；上下相鄰的元素兩者均為負(fù)時，效果不疊加，取負(fù)值更多的那個效果。

清除浮動主要是為了解決高度塌陷問題。而簡單的 clear: both 并不能解決這個問題，所以引出了許多解決方案。

StackOverflow - What methods of ‘clearfix’ can I use?：清除浮動黑科技完整解讀

那些年我們一起清除過的浮動：神文，把“清除浮動”定義為“閉合浮動”，把問題由來和解決方案都講清楚了，并且分析了各種解決方案的優(yōu)劣。

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

其一，通過在浮動元素的末尾添加一個空元素，設(shè)置 clear: both 屬性，after 偽元素其實(shí)也是通過 content 在元素的后面生成了內(nèi)容為一個點(diǎn)的塊級元素；

其二，通過設(shè)置父元素 overflow 或者 display: table 屬性來閉合浮動

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

Centering in CSS: A Complete Guide：非常全面的居中定位博客，包括各種情況下的水平居中，垂直居中和水平垂直居中方案。有展示示例及相應(yīng)的 HTML 和 CSS 代碼

文章大致結(jié)構(gòu)：

水平居中

對于行內(nèi)元素(inline)：text-align: center;

對于塊級元素(block)：設(shè)置寬度且 marigin-left 和 margin-right 是設(shè)成 auto

對于多個塊級元素：對父元素設(shè)置 text-align: center;，對子元素設(shè)置 display: inline-block;；或者使用 flex 布局

垂直居中

對于行內(nèi)元素(inline)

單行：設(shè)置上下 pandding 相等；或者設(shè)置 line-height 和 height 相等

多行：設(shè)置上下 pandding 相等；或者設(shè)置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用偽元素

對于塊級元素(block)：下面前兩種方案，父元素需使用相對布局

已知高度：子元素使用絕對布局 top: 50%;，再用負(fù)的 margin-top 把子元素往上拉一半的高度

未知高度：子元素使用絕對布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox：選擇方向，justify-content: center;

水平垂直居中

定高定寬：先用絕對布局 top: 50%; left: 50%;，再用和寬高的一半相等的負(fù) margin 把子元素回拉

高度和寬度未知：先用絕對布局 top: 50%; left: 50%;，再設(shè)置 transform: translate(-50%, -50%);

使用 Flexbox：justify-content: center; align-items: center;

“響應(yīng)式設(shè)計(jì)（Responsive Design)” 是一種讓網(wǎng)站針對不同的瀏覽器和設(shè)備“呈現(xiàn)”不同顯示效果的策略。

媒體查詢(Media Queries)是做此事所需的最強(qiáng)大的工具。

注： Responsive Web Design ＝ RWD，Adaptive Web Design ＝ AWD

RWD：

采用 CSS 的 media query 技術(shù)

流體布局（fluid grids）

自適應(yīng)的圖片/視頻等資源素材

（為小、中、大屏幕做一些優(yōu)化，目的是讓任何尺寸的屏幕空間都能得到充分利用）

AWD：

CSS media query 技術(shù)（僅針對有限幾種預(yù)設(shè)的屏幕尺寸設(shè)計(jì)）

用 JavaScript 來操作 HTML 內(nèi)容

在服務(wù)器端操作 HTML 內(nèi)容（比如為移動端減少內(nèi)容，為桌面端提供更多內(nèi)容）

以上 RWD 和 AWD 解釋引自  知乎 @屹峰

可以參考 Bootstrap 的網(wǎng)格系統(tǒng)：http://getbootstrap.com/css/#grid-less

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).

自己實(shí)現(xiàn)網(wǎng)格系統(tǒng)： Creating Your Own CSS Grid System

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

w3cplus - 一個完整的Flexbox指南：A Complete Guide to Flexbox 的譯文

SegmentFault - Flexbox詳解

w3cplus - 圖解CSS3 Flexbox屬性

w3cplus - Flexbox——快速布局神器

作者@brianway更多文章：個人網(wǎng)站 | CSDN | oschina