HTML CSS 常見的5種布局方法解釋

2021-10-03 12:26:59 字數 1259 閱讀 9540

靜態布局就是每乙個元素都用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...