網頁設計中的布局一般分為前端視角和設計視角。其中，前端視角主要是指實現頁面的各種CSS布局方式，分别為：靜态布局、流式布局、響應式布局、彈性布局和Flex布局。除了靜态布局，其他都能實現在不同分辨率下頁面的自适應，來給用戶最佳的視覺呈現。今天，就給大家講講前端網頁設計中的靜态布局和流式布局。

概念

靜态布局是最簡單的一種布局方式，網頁上的所有元素的尺寸一律使用px作為單位,在正常文檔流中該是什麼位置就是什麼位置。

特點

不管浏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示，如果設置了最小寬度，當小于這個寬度就會出現滾動條，如果大于這個寬度則内容居中外加背景，常用于PC端。

設計方法

居中布局，所有樣式使用絕對寬度/高度(px)，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。

優缺點

優點：這種布局最簡單，也沒有兼容性問題。

缺點：不能根據用戶的屏幕尺寸做出不同的表現。

實踐案例

例如我們常用絕對定位布局，盒子固定寬度居中，裡面三塊固定寬高，通過定位方式一行排列，适用于PC端。

顯示效果：

當頁面窗口縮小的時候，超出部分用滾動條顯示查詢。

移動端

由于靜态布局不适用于手機端,所以一般都會另設計一個布局,并使用另一個域名。例如百度。

可以發現：

PC端限制了最小的寬度, 低于了則以最小寬度出現滾動條；

移動端限制了最大的寬度, 超過了則以最大寬度居中顯示。

概念

流式布局也叫百分比布局，頁面元素的寬度按照屏幕分辨率進行适配調整，但整體布局不變。

特點

屏幕分辨率變化時，頁面裡元素的大小會變化而但布局不變，如果内容過長,可以實現自動換行。

設計方法

使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域和父元素的實時尺寸進行調整，盡可能的适應各種分辨率。往往配合max-width/min-width等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。

優缺點

優點：可用來應對不同尺寸的PC屏幕，在移動端開發也是常用布局方式；

缺點：如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示，因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

實踐案例

例如我們常用左側固定，右側自适應；左右固定寬度，中間自适應；聖杯布局，雙飛翼布局，品字布局。下面是品字布局代碼。

顯示效果：

當頁面窗口縮小的時候，頁面布局也不會發生變化。

就算是在移動端，布局也不會發生變化。

以上就是本文的全部内容啦~不知道有沒有對你起到一些幫助呢？如果你想了解更多關于前端方面的知識和技巧，請持續關注雲和數據的最新動态哦~還有更多精彩敬請期待！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!