css中基本布局?
css中基本的布局方式有以下幾種:
1、靜態布局
最傳統的布局方式,網頁中所有尺寸都是由px作為單位,設置了min-width,如果寬度小于就會出現滾動條,如果大于這個寬度則內容居中外加背景
2、自適應布局
可以看成是不同屏幕下由多個靜態布局組成的。自適應布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態布局(頁面元素位置可能發生改變),但在每個靜態布局中,頁面元素不隨窗口大小的調整發生變化。
自適應布局頁面里面元素的位置會變化,很好的解決了流式布局中的大屏空間利用率不高弊端。屏幕分辨率變化時,頁面里面元素的位置會變化而大小不會變化。
3、流式布局(又別名 百分比布局 %)
網頁中主要的劃分區域的尺寸使用百分數(搭配min-*、max-*屬性使用),分別為不同的屏幕設置布局格式,當屏幕大小改變時,會出現不同的布局。
意思就是在這個屏幕下這個元素塊在這個地方,但是在那個屏幕下,這個元素塊又會出現在那個地方。只是布局改變,元素不變。可以看成是不同屏幕下由多個靜態布局組成的。
4、響應式布局:媒體查詢
通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網頁內容也不一樣.利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度),并設置不同的CSS樣式,就可以實現響應式的布局。主要依靠是css的媒體查詢。
每個屏幕分辨率下面會有一個布局樣式,即元素位置和大小都會變。
5、彈性布局 (rem/em flex布局)
上一篇小說圖片如何轉換成文本