靜態布局就是每乙個元素都用px寫死。這種布局方法毫無疑問是最簡單(因為不用考慮不同解析度的情況),同時也是最糟糕的。
不過,現代大多數企業的pc站點先使用乙個靜態布局,然後移動端再單獨設計乙個布局。
彈性布局採用高階的度量單位(如em, rem)來度量文字的大小,其它採用px來進行度量。
這樣做得好處是,在其它元素不變的情況下,我們的文字可以根據具體的解析度放大和縮小。
這在移動端是非常有益處的,因為在移動端,我們經常會因為解析度的問題,導致網頁的縮放,字也看不清,給人一種非常不爽的感覺。
自適應布局就是結合css3的@media查詢,根據不同的解析度範圍選擇不同的靜態布局頁面。
對於同一裝置而言,獲得的其實是乙個靜態頁面,這個頁面的大小是不會再改變的了,即使你再之後修改了解析度。
相對於之前兩種布局而言,自適應布局有了很大的進步,已經有響應式布局的影子了。
流式布局就是大部分元素高度用px寫死,然後寬度用百分比布局。
典型的案例如bootstrap的柵格系統。
這樣做主要是為了在相近的解析度範圍之內相容。當然,如果解析度相差得特別大,那效果肯定不好。
這裡我們可以稍微講得詳細一點,流式布局主要有以下幾種:
左側固定,右側百分比。
右側固定,左側百分比。
兩側固定,中間百分比(聖杯布局或者叫雙飛翼布局)。-->由此可見布局也有上下級之分.
所有的都按照百分比來。
流式布局的實現方式:
乙個就是按照之前的定義,使用百分比布局。
可以給父元素寫乙個display:flex, 然後子元素使用flex進行布局。
建立bfc(block formating context),也就是在並列子元素中建立bfc。
之前提到的流式布局的最後一種,可以採用li+float的方法來實現。
響應式布局是最完美的布局,他要確保的是在乙個頁面的所有終端上都保持乙個非常好的效果。當然這對css程式設計師而言就不那麼又好了233.
響應式布局的主要方法就是通過流式布局和自適應布局相結合,也就是利用**查詢和自適應布局進行編寫。
html css常見頁面布局(一)
1.div元素居中 1.1居中的div元素寬高已定 效果圖 如下 css樣式 div1 div2 tips 遇到寬高固定的元素居中問題都可以按照這樣的樣式來設計,父元素應用position relative absolute 主要是為了照顧子div中的position absolute ps abs...
預設布局換行 幾種常見的htmlcss布局
ie盒模型和標準盒模型的區別 兩者的區別在於content的不同,ie盒模型的content包括border padding flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。對於ie,其瀏覽器的相容性,flex 只支援 ie 10 採用 flex 布局...
HTML CSS 五種布局方式
已知布局元素的高度,寫出三欄布局,要求左欄 右欄寬度各為300px,中間自適應。一 浮動布局 charset utf 8 浮動布局title type text css wrap1 div wrap1 left wrap1 right wrap1 center style head class wr...