布局的作用

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

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

布局的方式

一、浮動布局

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

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

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

二、定位布局

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

static 定位

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

fixed 定位

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

窗口滾動也不會移動。

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

relative 定位

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

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

也經常用來作為絕對定位的容器。

absolute 定位

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

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

sticky 定位

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

堆疊順序

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

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

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

三、靜態(tài)布局

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

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

優(yōu)點：

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

缺點：

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

四、流式布局

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

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

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

優(yōu)點：

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

缺點：

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

五、彈性布局

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

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

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

優(yōu)點：

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

缺點：

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

六、自適應布局

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

使用 @media 媒體查詢在不同尺寸的設備上切換相對應的樣式。

優(yōu)點：

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

缺點：

自適應屏幕適配是在一定范圍內，若屏幕太小，頁面內容會擁擠。

七、響應式布局

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

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

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

優(yōu)點：

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

同時方便網站內容的管理與更新、針對搜索引擎友好等特點。

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

布局應用

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

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

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

常見布局問題

高度坍塌

文檔流中，父元素若沒有設置高度，它的高度是由子元素撐開的。

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

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

解決方法：

給父元素定義高度。

使用空元素清除浮動。

父元素設置 overflow 屬性。