布局的作用

使頁面美觀、漂亮、讓用戶賞心悅目，留住用戶。

提高頁面開發(fā)和維護(hù)的效率。

布局的方式

一、浮動(dòng)布局

使用CSS中 float 屬性使元素向左或向右移動(dòng)，使用它塊級(jí)元素就會(huì)同行顯示。

浮動(dòng)之后的元素會(huì)圍繞它，浮動(dòng)之前的元素不受影響。

元素浮動(dòng)后，周圍元素也會(huì)重新排列?？墒褂?clear 清除浮動(dòng)，來避免此影響。

二、定位布局

使用 position 屬性定義定位類型，并指定元素位置來布局。

static 定位

靜態(tài)定位的元素遵循正常文檔流對(duì)象，為HTML的默認(rèn)值。

fixed 定位

固定定位的元素相對(duì)于瀏覽器窗口是固定位置。

窗口滾動(dòng)也不會(huì)移動(dòng)。

完全脫離文檔流，因此不占據(jù)空間，能與其他元素相重疊。

relative 定位

相對(duì)定位的元素相對(duì)于自身正常位置。

不脫離文檔流，移動(dòng)后原本占據(jù)的空間不會(huì)改變。

也經(jīng)常用來作為絕對(duì)定位的容器。

absolute 定位

絕對(duì)定位的元素相對(duì)于已定位的父元素，若無已定位的父元素，則相對(duì)于HTML。

脫離文檔流，不占據(jù)空間，與其他元素相重疊。

sticky 定位

粘性定位是基于頁面滾動(dòng)位置，在相對(duì)定位和固定定位之間切換顯示。

堆疊順序

使用 z-index 屬性控制堆疊順序，值越大層級(jí)越高。

有定位的元素比沒有定位的元素層級(jí)高。

在都有定位的情況下，層級(jí)取決于書寫順序。

三、靜態(tài)布局

靜態(tài)布局是在網(wǎng)頁上對(duì)所有元素的尺寸一律使用 px 為單位。

靜態(tài)布局是傳統(tǒng)的網(wǎng)站布局方式，當(dāng)屏幕縮小時(shí)，會(huì)出現(xiàn)橫向和豎向的滾動(dòng)條，來以隱藏溢出部分。

優(yōu)點(diǎn)：

代碼簡單，編寫容易，且無兼容性問題。

缺點(diǎn)：

無法根據(jù)不同的屏幕尺寸做出相應(yīng)的表現(xiàn)。

四、流式布局

流式布局使用 % 定義元素的寬度，使用 px 定義元素高度。

當(dāng)屏幕分辨率發(fā)生變化時(shí)，頁面中元素大小改變，布局位置不變。

往往配合 max-width 和 min-width 等屬性控制元素尺寸流動(dòng)范圍，以免過大或過小影響閱讀。

優(yōu)點(diǎn)：

在不同的屏幕尺寸下顯示相同的樣式（前端開發(fā)早期屏幕尺寸差異不大）。是移動(dòng)端常用布局方式。

缺點(diǎn)：

如果屏幕尺寸與最初設(shè)計(jì)的比例之間跨度過大，元素會(huì)被拉伸或擠壓，導(dǎo)致內(nèi)容顯示不協(xié)調(diào)。

五、彈性布局

彈性布局可以簡單、完整、相應(yīng)式的實(shí)現(xiàn)各種頁面布局。并且兼容所有主流瀏覽器。

對(duì)容器（父元素）與項(xiàng)目（子元素）添加屬性進(jìn)行布局。

使用 em (相對(duì)父元素的尺寸)和 rem (相對(duì)HTML元素的尺寸)為單位設(shè)置元素，且支持字體大小調(diào)整。

優(yōu)點(diǎn)：

靈活性高，可完美適應(yīng)寬高比一樣的屏幕尺寸。

缺點(diǎn)：

這種只是寬度自適應(yīng)，高度不是自適應(yīng)，因此不能滿足對(duì)高度或元素間距有要求的設(shè)計(jì)。

六、自適應(yīng)布局

自適應(yīng)布局是創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕尺寸范圍。

使用 @media 媒體查詢在不同尺寸的設(shè)備上切換相對(duì)應(yīng)的樣式。

優(yōu)點(diǎn)：

通過開發(fā)多套界面來滿足不同屏幕尺寸所對(duì)應(yīng)的樣式需求。

缺點(diǎn)：

自適應(yīng)屏幕適配是在一定范圍內(nèi)，若屏幕太小，頁面內(nèi)容會(huì)擁擠。

七、響應(yīng)式布局

相應(yīng)式布局的每個(gè)屏幕下會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

頁面兼容所有屏幕尺寸，而不是為每一個(gè)屏幕尺寸做特定的樣式。

通常使用 @media 媒體查詢和網(wǎng)格系統(tǒng)配合進(jìn)行布局。

優(yōu)點(diǎn)：

滿足用戶在不同設(shè)備上瀏覽訪問的需求。

同時(shí)方便網(wǎng)站內(nèi)容的管理與更新、針對(duì)搜索引擎友好等特點(diǎn)。

缺點(diǎn)：設(shè)計(jì)難，實(shí)現(xiàn)難，成本大。

布局應(yīng)用

若只做 pc 端，靜態(tài)布局是最好的選擇，通過定寬高即可簡單快捷的完成。

若只做移動(dòng)端，且元素高度與間距要求不高，彈性布局是最好的選擇，使用 css 以及調(diào)節(jié)字體大小即可完成。

若pc端與移動(dòng)端要兼容，且要求很高，響應(yīng)式布局是最好的選擇，根據(jù)不同寬高做不同布局。

常見布局問題

高度坍塌

文檔流中，父元素若沒有設(shè)置高度，它的高度是由子元素?fù)伍_的。

在子元素設(shè)置浮動(dòng)后，子元素完全脫離文檔流，導(dǎo)致子元素不在撐起父元素的高度，父元素便會(huì)高度坍塌。

會(huì)造成父元素下的所有元素向上移動(dòng)，頁面布局混亂。

解決方法：

給父元素定義高度。

使用空元素清除浮動(dòng)。

父元素設(shè)置 overflow 屬性。