布局的作用

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

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

布局的方式

一、浮動布局

使用CSS中 float 屬性使元素向左或向右移動，使用它塊級元素就會同行顯示。

浮動之后的元素會圍繞它，浮動之前的元素不受影響。

元素浮動后，周圍元素也會重新排列。可使用 clear 清除浮動，來避免此影響。

二、定位布局

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

static 定位

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

fixed 定位

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

窗口滾動也不會移動。

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

relative 定位

相對定位的元素相對于自身正常位置。

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

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

absolute 定位

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

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

sticky 定位

粘性定位是基于頁面滾動位置，在相對定位和固定定位之間切換顯示。

堆疊順序

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

有定位的元素比沒有定位的元素層級高。

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

三、靜態(tài)布局

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

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

優(yōu)點：

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

缺點：

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

四、流式布局

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

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

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

優(yōu)點：

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

缺點：

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

五、彈性布局

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

對容器（父元素）與項目（子元素）添加屬性進行布局。

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

優(yōu)點：

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

缺點：

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

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

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

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

優(yōu)點：

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

缺點：

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

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

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

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

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

優(yōu)點：

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

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

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

布局應(yīng)用

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

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

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

常見布局問題

高度坍塌

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

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

會造成父元素下的所有元素向上移動，頁面布局混亂。

解決方法：

給父元素定義高度。

使用空元素清除浮動。

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