布局的概念
什麽是布局？

布局是前端人員(yuán)的核心基礎技能。
目的是對所做的頁面模塊及内容進行科學合理的組織和呈現。
因此布局的好壞就直接影響到之後工(gōng)作的進展與效率。

布局的作用
使頁面美觀、漂亮、讓用戶賞心悅目，留住用戶。
提高頁面開(kāi)發和維護的效率。

布局的方式

一(yī)、浮動布局
使用CSS中(zhōng) float 屬性使元素向左或向右移動，使用它塊級元素就會同行顯示。
浮動之後的元素會圍繞它，浮動之前的元素不受影響。
元素浮動後，周圍元素也會重新排列。可使用 clear 清除浮動，來避免此影響。

二、定位布局
使用 position 屬性定義定位類型，并指定元素位置來布局。
static 定位
靜态定位的元素遵循正常文檔流對象，爲HTML的默認值。
fixed 定位
固定定位的元素相對于浏覽器窗口是固定位置。
窗口滾動也不會移動。
完全脫離(lí)文檔流，因此不占據空間，能與其他元素相重疊。
relative 定位
相對定位的元素相對于自身正常位置。
不脫離(lí)文檔流，移動後原本占據的空間不會改變。
也經常用來作爲絕對定位的容器。
absolute 定位
絕對定位的元素相對于已定位的父元素，若無已定位的父元素，則相對于HTML。
脫離(lí)文檔流，不占據空間，與其他元素相重疊。
sticky 定位
粘性定位是基于頁面滾動位置，在相對定位和固定定位之間切換顯示。
堆疊順序
使用 z-index 屬性控制堆疊順序，值越大(dà)層級越高。
有定位的元素比沒有定位的元素層級高。
在都有定位的情況下(xià)，層級取決于書(shū)寫順序。
三、靜态布局
靜态布局是在網頁上對所有元素的尺寸一(yī)律使用 px 爲單位。
靜态布局是傳統的網站布局方式，當屏幕縮小(xiǎo)時，會出現橫向和豎向的滾動條，來以隐藏溢出部分(fēn)。
優點：
代碼簡單，編寫容易，且無兼容性問題。
缺點：

無法根據不同的屏幕尺寸做出相應的表現。

四、流式布局
流式布局使用 % 定義元素的寬度，使用 px 定義元素高度。
當屏幕分(fēn)辨率發生(shēng)變化時，頁面中(zhōng)元素大(dà)小(xiǎo)改變，布局位置不變。
往往配合 max-width 和 min-width 等屬性控制元素尺寸流動範圍，以免過大(dà)或過小(xiǎo)影響閱讀。
優點：
在不同的屏幕尺寸下(xià)顯示相同的樣式（前端開(kāi)發早期屏幕尺寸差異不大(dà)）。是移動端常用布局方式。
缺點：
如果屏幕尺寸與最初設計的比例之間跨度過大(dà)，元素會被拉伸或擠壓，導緻内容顯示不協調。

五、彈性布局
彈性布局可以簡單、完整、相應式的實現各種頁面布局。并且兼容所有主流浏覽器。
對容器（父元素）與項目（子元素）添加屬性進行布局。
使用 em (相對父元素的尺寸)和 rem (相對HTML元素的尺寸)爲單位設置元素，且支持字體(tǐ)大(dà)小(xiǎo)調整。
優點：
靈活性高，可完美适應寬高比一(yī)樣的屏幕尺寸。
缺點：
這種隻是寬度自适應，高度不是自适應，因此不能滿足對高度或元素間距有要求的設計。
六、自适應布局
自适應布局是創建多個靜态布局，每個靜态布局對應一(yī)個屏幕尺寸範圍。
使用 @media 媒體(tǐ)查詢在不同尺寸的設備上切換相對應的樣式。
優點：
通過開(kāi)發多套界面來滿足不同屏幕尺寸所對應的樣式需求。
缺點：
自适應屏幕适配是在一(yī)定範圍内，若屏幕太小(xiǎo)，頁面内容會擁擠。
七、響應式布局
相應式布局的每個屏幕下(xià)會有一(yī)個布局樣式，即元素位置和大(dà)小(xiǎo)都會變。
頁面兼容所有屏幕尺寸，而不是爲每一(yī)個屏幕尺寸做特定的樣式。
通常使用 @media 媒體(tǐ)查詢和網格系統配合進行布局。
優點：
滿足用戶在不同設備上浏覽訪問的需求。
同時方便網站内容的管理與更新、針對搜索引擎友好等特點。
缺點：設計難，實現難，成本大(dà)。
布局應用
若隻做 pc 端，靜态布局是最好的選擇，通過定寬高即可簡單快捷的完成。
若隻做移動端，且元素高度與間距要求不高，彈性布局是最好的選擇，使用 css 以及調節字體(tǐ)大(dà)小(xiǎo)即可完成。
若pc端與移動端要兼容，且要求很高，響應式布局是最好的選擇，根據不同寬高做不同布局。
常見布局問題
高度坍塌
文檔流中(zhōng)，父元素若沒有設置高度，它的高度是由子元素撐開(kāi)的。
在子元素設置浮動後，子元素完全脫離(lí)文檔流，導緻子元素不在撐起父元素的高度，父元素便會高度坍塌。
會造成父元素下(xià)的所有元素向上移動，頁面布局混亂。
解決方法：
給父元素定義高度。
使用空元素清除浮動。
父元素設置 overflow 屬性。