css佈局方式有哪些

css佈局方式有：1、靜態佈局（Float佈局和絕對佈局）；2、自適應佈局；3、流式佈局（左側固定右側自適應、左右固定寬度中間自適應、聖杯佈局、雙飛翼佈局）；4、響應式佈局；5、彈性佈局。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

我們從css發展到現在大類別可以歸納為以下幾種，你所了解的實作方法可能就是以下方式中的具體實作：

• 靜態佈局
• 自適應佈局
• #串流佈局(又別名百分比佈局%)
• #響應式佈局：媒體查詢
• 彈性佈局(rem/em flex佈局)

1. 靜態佈局

最傳統的佈局方式，網頁中所有尺寸都是由px作為單位，設定了min-width,如果寬度小於就會出現滾動條，如果大於這個寬度則內容居中外加背景。

實作方法：

PC：居中佈局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在螢幕寬高有調整時，使用橫向和垂直的捲軸來查閱被遮掩部分；

行動裝置：另外建立行動網站，單獨設計一個佈局，使用不同的網域如wap.或m.。

優點：採用先前的css2的佈局·方式，佈局簡單，沒有相容性問題。

缺點: 在手機端不能合理的顯示，行動端不能使用pc端頁面，需要再寫一個佈局來呈現。

實作案例：

• Float 佈局
• 絕對佈局

##2. 自適應佈局

可以看成是不同畫面下由多個靜態佈局組成的。 自適應佈局是為不同的螢幕解析度分別定義不同的佈局。改變螢幕解析度可以切換不同的靜態佈局（頁面元素位置可能會改變），但在每個靜態佈局中，頁面元素不會隨視窗大小的調整而變化。自適應佈局頁裡面元素的位置會變化，很好的解決了串流佈局中的大螢幕空間利用率不高弊端。

螢幕解析度改變時，頁裡面元素的位置會改變而大小不會改變。

實務案例： 百度搜尋首頁

（學習影片分享：

css影片教學）

3. 串流版面配置

網頁中主要的分割區域的

尺寸使用百分數（搭配min-*、max-*屬性使用),分別為不同的螢幕設定佈局格式，當螢幕大小改變時，會出現不同的佈局，意思就是在這個畫面下這個元素塊在這個地方，但是在那個畫面下，這個元素塊又會出現在那個地方。只是版面改變，元素不變。可以看成是不同螢幕下由多個靜態佈局組成的。

而串流佈局的特點是隨著螢幕的改變，頁面的佈局沒有發生大的變化，可以進行適配調整，這個正好與自適應佈局相補。

使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的即時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或過小影響閱讀。 這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC螢幕（那時螢幕尺寸的差異不會太大），在當今的行動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”

屏幕分辨率變化時，頁面裡元素的大小會變化而但佈局不變。

#主要實踐案例：

• 左側固定右側自適應

• 左右固定寬度中間自適應

• 聖杯佈局

• 雙飛翼佈局

4. 響應式佈局

透過響應式設計能讓網站在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣.利用媒體查詢可以偵測到螢幕的尺寸(主要偵測寬度)，並設定不同的CSS樣式，就可以實現響應式的佈局。主要依靠是css的媒體查詢。

每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會改變。

實作案例媒體查詢

5. 彈性佈局

• #rem/em
• flex佈局

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css佈局方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！