有這樣一個問題請說說你知道的所有web佈局方式？

一般來說，有以下這些佈局方法：

1、浮動

float:left|right

2、inline-block

display:inline-block

3、flexible box

display:flex

4、grid

display:grid

5、絕對、相對定位

position:absolute|relative

6、表格

<table>

或

display:table

使用框架佈局

bootstrap、Pure.css

有小夥伴就要說，這也太多了吧，我應該怎麼選擇？別急，下面我們就開始逐一分析各種方法在web自適應佈局下的使用姿勢，最後做個總結。

本文的所有例子使用了同一種三欄佈局。

• 大尺寸 width > 1024px

• 中尺寸 768px < width < 1024px

• 小尺寸 width > 768px

這個話題到這裡就算是結束了，我自己是前端程式設計師，建了一個群每天分享對應的學習資料：640633433，歡迎初學和進階中的小夥伴。

如果你看了這篇文章開心了，請關注我的 “web前端EDU ”公眾號！~謝謝

1、浮動佈局

float:left|right

最常用的佈局方式之一，設定了 float 的元素脫離了文件流。需要注意在使用過浮動後，需要清除浮動，從而避免影響後面的非浮動元素。

HTML

普通的html佈局，一個header，一個footer，中間是三欄式佈局。

關鍵css

給中間的三欄都設上浮動。

清除浮動

元素的寬度都是百分比。因為沒有內容高度給死了，日常應用時多用auto，讓裡面的內容撐開高度。

@media查詢

當@media的查詢條件滿足時，應用{}中的樣式。screen就是指電腦螢幕，還有print指列印頁面。

中尺寸螢幕要把 right 擠下去，只要讓 left 和 content 加起來等於100%，後面的東西就自動換行了。小尺寸用了css選擇器，把所有 rwd-content- 開頭的class寬度都設成100%。

2、inline-block

display:inline-block

HTML

html和浮動佈局的一樣，為了避免空白字元壓縮（white space collapse）的問題，寫法略有變化。

關鍵css

對我們這個佈局，只是把float:left改成這兩句。自適應的程式碼也和float一樣，不重複貼了。

float VS.Inline-block

兩者都是很常用的佈局方式。

• 如果需要垂直居中，使用inline-block。

• inline-block有空白字元壓縮的問題。

• 使用float，注意要清除浮動。

• 沒有特別推薦用哪種，看個人習慣。

如何調整float或inline-block佈局中元素的順序？

比如我在小尺寸的時候，想把content放最上面，left和right都擠下去，怎麼做呢？

float和inline-block佈局沒有純css的方法，要用js把dom扣出來，往後面放，flexbox和grid佈局都可以很好地解決這個問題。

3、flexible box

display:flex

HTML

html還是一樣。

看css前先說說flex基礎。

flexbox佈局說白了就是點菜。先想好要吃什麼，然後點必選菜，最後點可選菜，愛點不點。先想要吃什麼，還是用之前的例子。header和footer不用管，需要佈局一個這樣的東西：

然後點必選菜，有下面幾個必選菜要點：

1) flex-direction，選水平方向從左到右，選

flex-direction:row

2) flex-wrap，我們是單行佈局，不要換行，選

flex-wrap: nowrap

3) justify-content，如果水平方向有空間，怎麼分配，選

space-between

4) 垂直方向怎麼佈局，選

align-items: flex-start

5) align-content，多行佈局怎麼分配空間，我們是單行佈局，不存在的

選好這5個之後，再加上display: flex;，往flex容器上一寫，就完事了。可以偷懶的地方: 上面5種屬性，第一個值是預設值，如果選了第一個，這個屬性可以不用寫。最後的可選菜比較常用的是可以調整flex子項(flex item)的順序(order)，單獨改變某個子項的佈局等。

關鍵css

flex容器(container)屬性如前文所說。

自適應佈局時，設flex-wrap: wrap;，其他一樣。

Flexbox VS Float/Inline-block

• 如果瀏覽器沒問題，flexbox可以替代（或者替代大多數）float和inline-block。

• 相比float，flexbox解決了垂直居中的問題。

• 相比float/inline-block，flexbox多了垂直佈局的方式，可以使容器中的內容等高，還可以改變內容的順序。

• flexbox就像名字一樣，非常靈活，同一種佈局都可以用多種方式實現。

• flexbox的缺點是需要記的屬性比較多，小部分瀏覽器支援不好。

4. grid佈局

display:grid

HTML

grid的特點就是為所欲為，dom的順序無所謂，只要放在grid容器下就可以。

看css之前還是先說說grid基礎。一般grid有兩種使用方式：

1) 網格項(grid item)起個名字，在網格容器（grid container）上定義好網格佈局並且通過名字指定好所有網格項的位置。

2) 網格容器只定義佈局，每個網格項在使用的時候，自行選擇放到哪個(或哪幾個)網格中。

不管哪種方式，只要會劃線，你就掌握了grid佈局。把想要的佈局畫出來，然後用線分割開。

橫向1 ～ 7的黑線和縱向1) ～ 4)的紅線都叫網格線。

網格線包圍的一個或多塊矩形區域叫網格區塊。

第一種grid佈局方式:

這個話題到這裡就算是結束了，我自己是前端程式設計師，建了一個群每天分享對應的學習資料：640633433，歡迎初學和進階中的小夥伴。

如果你看了這篇文章開心了，請關注我的 “web前端EDU ”公眾號！~謝謝

網格項(grid item)用grid-area屬性起個名字。

網格容器(grid container)上三個主要屬性要設定：

• grid-template-areas：就是一張地圖，和我們劃線分割的圖佈局一樣，.表示空白。

• grid-template-rows: 設定行上的高度，不設定的話為auto。除了固定數字，百分比還有fr。

• grid-template-rows: repeat(3, 1fr)就是三等分的意思。

• grid-template-columns: 設定列的寬度。

自適應佈局就是重畫地圖。

第二種grid佈局方式:

網格容器上只要設定grid-template-rows和grid-template-columns。網格項在用的時候，自行設定需要放的地方。有很多種設定方式。

四個屬性，分別是行、列的開始和結束。這邊的序號指的是網格線，參照之前圖中橫向的黑色網格線和縱向的紅色網格線。參照圖，應該好理解。相當於:

簡寫成兩個屬性，<開始> / <結束>。

相當於:

span 3指的是經過了3個網格；如果網格項只跨越了1格，可以省略設定結束位置的網格線。

相當於:

網格線上左下右的順序，不同於margin和padding的上右下左。

當然你可以別管這麼多亂七八糟的，看我自適應佈局:

Grid VS Flexbox

• flexbox是單方向的，橫向或者縱向，grid是二維的。

• grid就是可以為所欲為，甚至和html的順序沒有關係，只要扔到grid容器裡就可以。

• grid能做到flexbox做不到的事，反之亦然。如果瀏覽器支援，最好結合兩者使用。

• grid適合佈局大的骨架，flexbox適合佈局區域性。

• grid的最大缺點是瀏覽器支援不是很好。

• grid另一個缺點是，如果要往現有的佈局里加一點或者刪一點東西，基本就是重畫了，其實也不算缺點，因為重畫很快。

• grid不適合複雜的佈局，因為網格線太多我頭暈。

• grid小技巧，用chrome和firefox的除錯工具檢視grid容器可以看到網格，光看程式碼要瘋。

5. 絕對、相對定位

position:absolute|relative

相當常用，特別是各種特效裡都會用到。

對於自適應佈局，就自己算top和left吧。

6. 表格

<table>或display:table

個人認為表格佈局比較適用於表格(看上去是廢話，但並不是)。如果是一般的頁面佈局，就不要用table了。

7. 使用框架佈局

bootstrap、Pure.css

所謂萬變不離其宗，用框架佈局也是使用了上面所說的原理，這邊就不再細說各種框架。

IE盒模型

推薦給所有元素加上border-box;

IE盒模型的寬度和高度包括了padding和border，這樣對於百分比的佈局比較好控制，不會出現加起來超過100%而換行的情況。

* 儘量不使用固定高度、寬度

在自適應的佈局中少用或者不用固定的高度、寬度，使用百分比, auto或calc()。

* viewport

viewport主要用於手機自適應佈局，因為現在手機解析度越來越高，web上的1px到手機上未必就是1px，用這個meta讓手機的px和web的px保持一致。

說到這裡，看完的同學應該都明白了web自適應佈局常見的套路。當碰到某個酷炫的自適應頁面的時候至少不會說: 這個怎麼實現的？還有這種操作？

最後總結一下:

自適應佈局需要注意的事:

1. 使用IE盒模型box-sizing: border-box

2. 不要用固定寬高，使用百分比, auto或calc()

3. @media是自適應佈局利器

4. 手機上要設定meta viewport

5. 關於各種佈局的選擇： 在瀏覽器支援的情況下，頁面的大框架推薦用grid佈局。定好架子後，區域性佈局推薦用flex。 float和inline-block瀏覽器支援好，但各有缺點。

那麼有同學就要問，是不是隻要學flex和grid就行了？對不起，所有都要學（就是這麼可怕）。各種佈局都有他們的使用場景。並且你也攔不住別人用，都需要看懂是吧。只能說要與時俱進，路漫漫其修遠兮，吾將上下而求索。

這個話題到這裡就算是結束了，我自己是前端程式設計師，建了一個群每天分享對應的學習資料：640633433，歡迎初學和進階中的小夥伴。

如果你看了這篇文章開心了，請關注我的 “web前端EDU ”公眾號！~謝謝