Web前端布局

Web前端布局

布局的概念

什么是布局？

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

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

布局的方式

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

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

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

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