css中有什么布局方式

這篇文章主要介紹了css中有什么布局方式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

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中有什么布局方式”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!