你不知道的css各類布局(一)之固定布局 靜態布局

2022-06-07 01:24:09 字數 1031 閱讀 2690

我們知道css中有各類布局,從發展至今包括 固定布局、靜態布局、柵格布局、流體布局、液體布局、自適應布局、響應式布局、彈性布局,但是概念總是模糊不清,最近在看一本很喜歡的書,決定要把css布局整理一下

固定布局(fixed layout)即傳統web設計,頁面的大小採用固定的寬度固定布局擁有固定的外表使用絕對長度單位(px、pt、mm、cm、in)

因為使用的是絕對長度單位,頁面元素的位置不會移動,所以無論訪問者的螢幕解析度多大(不管瀏覽器尺寸具體是多少)都會和其他訪問者看到相同尺寸的頁面,網頁布局始終按照最初寫**時的布局來顯示。

常規的pc**都是靜態、布局的,也就是設定了min-width,這樣的話,如果小於這個寬度就會出現滾動條,如果大於這個寬度則內容居中外加背景,這種設計常見於pc端。

pc居中布局,所有樣式使用絕對寬度/高度(px),設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分;

移動裝置另外建立移動**,單獨設計乙個布局,使用不同的網域名稱如wap.或m.。

這些內部元件尺寸分別設定為520,200和200畫素。960畫素寬已成為現代網頁設計的標準,因為大多數**的使用者瀏覽被假定為1024 × 768解析度或更高。

不同的裝置將會以多樣的方式來渲染靜態布局的頁面,所以就會有一些不可預期的現象出現。比如:在桌面瀏覽器中,如果瀏覽器視窗寬度過小,部分頁面內容就會被切掉,橫向的滾動條就會出現。而在移動端,頁面則會被自動的縮放,

如此去閱讀頁面的話我想如果你是讀者肯定也會很反感吧。

760畫素寬的布局效果良好,並仍然適用於大螢幕。

網頁的製作方法,我們需要一些適應未知裝置的方法。

靜態布局(static layout)是固定布局的別名

固定布局,流體布局,彈性布局,哪乙個適合你?

布局的幾種方式(靜態布局、自適應布局、流式布局、響應式布局、彈性布局)

你不知道的css各類布局(四)之響應式布局

響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局 響應式設計的目標是確保乙個頁面在所有終端上 各種尺寸的pc 手機 手錶 冰箱的web瀏覽器等等 都能顯示出令人滿意的效果,對css編寫者而言,在實現上不拘泥於具體手法,但通常是糅合了流式布局 自適應 布局。分別為不同的螢幕解析度定義布局,同時,在...

css你所不知道技巧

當元素沒有文字內容,但有href屬性的時候,顯示它的href屬性 table layout fixed可以讓每個格仔保持等寬 table max height與 overflow hidden 一起來建立純 css 的滑塊 slider slider hover 使列表的每項都由逗號分隔 ul li...

你不知道的css小知識

使用 webkit transform scale 一種字型有粗體 斜體 下劃線 刪除線等諸多屬性。但是並不是所有字型都做了這些,一些不常用的字型,或許就只有個正常體,如果你用italic,就沒有效果了 這時候你就要用oblique.可以理解成italic是使用文字的斜體,oblique是讓沒有斜體...