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

標(biāo)簽 ： 前端

[TOC]

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

下面幾個(gè)入門(mén)教程不錯(cuò)：

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

MDN - CSS入門(mén)教程: MDN 的官方文檔

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

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

10個(gè)文檔學(xué)布局：通過(guò)十個(gè)例子講解布局，主要涉及相對(duì)布局，絕對(duì)布局，浮動(dòng)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
    

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

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

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

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

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

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

簡(jiǎn)單說(shuō)起來(lái)就是雙飛翼布局比圣杯布局多創(chuàng)建了一個(gè) div，但不用相對(duì)布局了，少設(shè)置幾個(gè)屬性。

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

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

三欄式布局參考下面幾個(gè)鏈接:

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

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

In Search of the Holy Grail：圣杯布局的來(lái)源

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

三欄式布局涉及到負(fù) magin 和 清除浮動(dòng)的問(wèn)題。

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

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

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

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

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

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

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

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

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

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

清除浮動(dòng)主要是為了解決高度塌陷問(wèn)題。而簡(jiǎn)單的 clear: both 并不能解決這個(gè)問(wèn)題，所以引出了許多解決方案。

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

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

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

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

其二，通過(guò)設(shè)置父元素 overflow 或者 display: table 屬性來(lái)閉合浮動(dòng)

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

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

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

水平居中

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

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

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

垂直居中

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

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

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

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

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

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

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

水平垂直居中

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

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

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

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

媒體查詢(xú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ù)（僅針對(duì)有限幾種預(yù)設(shè)的屏幕尺寸設(shè)計(jì)）

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

在服務(wù)器端操作 HTML 內(nèi)容（比如為移動(dòng)端減少內(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 - 一個(gè)完整的Flexbox指南：A Complete Guide to Flexbox 的譯文

SegmentFault - Flexbox詳解

w3cplus - 圖解CSS3 Flexbox屬性

w3cplus - Flexbox——快速布局神器

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