佈局的概念

什麼是佈局

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

佈局的作用

1. 使頁面美觀、漂亮、讓使用者賞心悅目，留住使用者。
2. 提高頁面開發和維護的效率。

佈局的方式

一、浮動佈局

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

二、定位佈局

使用 position 屬性定義定位型別，並指定元素位置來佈局。

static 定位

靜態定位的元素遵循正常文件流物件，為HTML的預設值。

fixed 定位

固定定位的元素相對於瀏覽器視窗是固定位置。
視窗滾動也不會移動。
完全脫離文件流，因此不佔據空間，能與其他元素相重疊。

relative 定位

相對定位的元素相對於自身正常位置。
不脫離文件流，移動後原本佔據的空間不會改變。
也經常用來作為絕對定位的容器。

absolute 定位

絕對定位的元素相對於已定位的父元素，若無已定位的父元素，則相對於HTML。
脫離文件流，不佔據空間，與其他元素相重疊。

sticky 定位

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

堆疊順序

使用 z-index 屬性控制堆疊順序，值越大層級越高。
有定位的元素比沒有定位的元素層級高。
在都有定位的情況下，層級取決於書寫順序。

三、靜態佈局

靜態佈局是在網頁上對所有元素的尺寸一律使用 px 為單位。
靜態佈局是傳統的網站佈局方式，當螢幕縮小時，會出現橫向和豎向的滾動條，來以隱藏溢位部分。

優點：
程式碼簡單，編寫容易，且無相容性問題。
缺點：
無法根據不同的螢幕尺寸做出相應的表現。

四、流式佈局

流式佈局使用 % 定義元素的寬度，使用 px 定義元素高度。
當螢幕解析度發生變化時，頁面中元素大小改變，佈局位置不變。
往往配合 max-width 和 min-width 等屬性控制元素尺寸流動範圍，以免過大或過小影響閱讀。

優點：
在不同的螢幕尺寸下顯示相同的樣式（前端開發早期螢幕尺寸差異不大）。是移動端常用佈局方式。
缺點：
如果螢幕尺寸與最初設計的比例之間跨度過大，元素會被拉伸或擠壓，導致內容顯示不協調。

五、彈性佈局

彈性佈局可以簡單、完整、相應式的實現各種頁面佈局。並且相容所有主流瀏覽器。
對容器（父元素）與專案（子元素）新增屬性進行佈局。
使用 em (相對父元素的尺寸)和 rem (相對HTML元素的尺寸)為單位設定元素，且支援字型大小調整。

優點：
靈活性高，可完美適應寬高比一樣的螢幕尺寸。
缺點：
這種只是寬度自適應，高度不是自適應，因此不能滿足對高度或元素間距有要求的設計。

六、自適應佈局

自適應佈局是建立多個靜態佈局，每個靜態佈局對應一個螢幕尺寸範圍。
使用 @media 媒體查詢在不同尺寸的裝置上切換相對應的樣式。

優點：
通過開發多套介面來滿足不同螢幕尺寸所對應的樣式需求。
缺點：
自適應螢幕適配是在一定範圍內，若螢幕太小，頁面內容會擁擠。

七、響應式佈局

相應式佈局的每個螢幕下會有一個佈局樣式，即元素位置和大小都會變。
頁面相容所有螢幕尺寸，而不是為每一個螢幕尺寸做特定的樣式。
通常使用 @media 媒體查詢和網格系統配合進行佈局。

優點：
滿足使用者在不同裝置上瀏覽訪問的需求。
同時方便網站內容的管理與更新、針對搜尋引擎友好等特點。
缺點：
設計難，實現難，成本大。

佈局應用

1. 若只做 pc 端，靜態佈局是最好的選擇，通過定寬高即可簡單快捷的完成。
2. 若只做移動端，且元素高度與間距要求不高，彈性佈局是最好的選擇，使用 css 以及調節字型大小即可完成。
3. 若pc端與移動端要相容，且要求很高，響應式佈局是最好的選擇，根據不同寬高做不同佈局。

常見佈局問題

高度坍塌

文件流中，父元素若沒有設定高度，它的高度是由子元素撐開的。
在子元素設定浮動後，子元素完全脫離文件流，導致子元素不在撐起父元素的高度，父元素便會高度坍塌。
會造成父元素下的所有元素向上移動，頁面佈局混亂。

解決方法：
給父元素定義高度。
使用空元素清除浮動。
父元素設定 overflow 屬性。

待更…