5個常用的CSS單位

2021-10-04 10:46:33 字數 1229 閱讀 7514

我們在很多時候都需要用到css的尺寸 ， 字型大小，段落行距 ， 高度，margin等等

那這一篇文章主要講解css常用的5個單位

px是乙個絕對單位，他代表你現在使用的螢幕的畫素比例中的乙個光點 例如1920*1080就代表橫螢幕由1920個畫素光點組成 那1px就是 1/1920個距離

但他是乙個絕對單位在很多時候會不容易更改,比如我們在設定文字大小時通常還會設定行高，那我們在修改時兩個都要同時修改

p
em是乙個相對單位，基於目前這個容器的大小設定可以理解為倍數。例如我們將body設定為字型10px,

那麼p中的2em就是兩倍即為20px，注意是基於父元素的設定

body


p
這裡分享乙個可以根據螢幕大小自動獲取html字型大小的封裝函式

(


function


(doc, win);if


(!doc.addeventlistener)


return


; win.


addeventlistener


(resizeevt, recalc,


false);


doc.


addeventlistener


('domcontentloaded'


, recalc,


false);


})(document, window)


;
這兩個單位也是相對單位，即為viewport heightviewport width他代表的是螢幕可視局域的相對值值可選由1到100例如下面這個div就可佔螢幕的高一半寬一半 注意**（vh用作高度，vw用作寬度）**

div
首先介紹這兩個單位分別代表螢幕短的一邊和螢幕長的一邊，在以往我們是不需要這樣的需求的，但現在智慧型手機的出現我們有了旋轉螢幕這個動作 ， 所以vmin 和vmax 通常配合 media query來完成響應式的頁面。 他和vh一樣也是值由1到100 例如下面這個我們設定寬度為最小邊滿屏，這樣手機就算旋轉為橫屏這個也是完整的顯示不會出現滾動條了

body


img
如有錯誤，請指正！

常用css單位

div中的字型大小是1.2em，也就是div從父類元素繼承的字型大小的1.2倍。在這裡，body的字型是14px，那麼div的字型大小是1.2 14 16.8px.注意 用em一層一層級聯得定義巢狀元素的字型大小 解決方法就是 em 換做 rem rem rem中的r代表根元素，它的值就是根元素設定...

css常用單位

當前頁面的高度100vh 8rem height calc 100vh 8rem 當前頁面的寬度100vh 8rem width calc 100vw 4rem 單位描述 em它是描述相對於應用在當前元素的字型尺寸，所以它也是相對長度單位。一般瀏覽器字型大小預設為16px，則2em 32px ex依...

css常用單位

1.px 絕對單位，頁面按精確畫素展示 2.em 相對單位，基準點為父節點字型的大小，如果自身定義了font size按自身來計算 瀏覽器預設字型是16px 整個頁面內1em不是乙個固定的值。3.rem 相對單位，可理解為 root em 相對根節點html的字型大小來計算，css3新加屬性，chr...