首頁  >  文章  >  web前端  >  CSS中基本版面與格式位置介紹

CSS中基本版面與格式位置介紹

零下一度
零下一度原創
2017-07-26 09:34:001521瀏覽

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

 第一種位置關係:position:fixed  鎖定位置(相對於整個瀏覽器的位置),常用在各大網站的右下角或其它位置的小廣告。

如果需要調整鎖定位置,需要使用以下方式:

position:fixed#; top:0px; left:0px; right:0px; bottom:0px" >

  第二種位置關係: position:absolute 絕對位置(相對於父級元素--瀏覽器,絕對定位的上級) 

(1)最外邊沒有absolute,則調整時div相對於瀏覽器變化;(2)最外面有absolute,則調整時div相對於最外層邊界變化。

如果需要調整絕對位置,需要使用以下方式:

position:absolute#; top:0px; left:0px; right:0px; bottom:0px" >

  第三種位置關係: position:relative 相對位置(相對於自身應該出現的位置)

如果需要調整相對位置,需要使用以下方式:

#position:relative; top:0px; left:0px; right:0px; bottom:0px" >

以上是CSS中基本版面與格式位置介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn