【CSS布局.4】五種CSS布局類型

來源:互聯網
上載者:User

 CSS 布局的五種類型概述

有五種基本布局定位類型可供選擇:

* 彈性布局
- 總體寬度及其中所有欄的值都以 em 單位編寫。
這應使布局能夠使用瀏覽器的指定基本字型大小縮放。 對於視力不好的使用者, 這可能更有吸引力、更易於訪問, 因為欄寬度將變得更寬,
能以任何大小顯示更舒適、更可讀的行長度。 由於總體寬度將縮放, 您的設計必須允許可這寬度。
* 固定式配置
- 總體寬度及其中所有欄的值都以像素單位編寫。 布局位於使用者瀏覽器的中心。
* 流體布局
- 總體寬度及其中所有欄的值都以百分比編寫。 百分比通過使用者瀏覽器視窗的大小計算。
* 混合布局
- 混合布局組合兩種其他類型的布局 - 彈性和流體。 頁面的總寬度為 100%, 但側欄值設定為 em 單位。
* 絕對位置布局
- 所有前述布局的外欄使用浮動內容。 而絕對位置布局完全如其名所示
- 有絕對位置的外欄。 必須記住, 當使用這些布局時, 側欄會“提出文檔流程”, 因而可能有一些不合適的結果 (例如,
頁尾可能“看不見”在側欄在何處結束並在主要內容地區包含的內容少於側欄的頁面與頁尾重疊)。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.