你可能沒注意的CSS單位

2021-06-27 00:56:28 字數 1607 閱讀 7702

css中的單位我們經常用到pxptem百分比,px和pt不用多說

em是相對單位,參考物是父元素的font-size,具有繼承的特點

如果字型大小是16px(瀏覽器的預設值),那麼1em = 16px

這樣使用換算很複雜,尤其是和px對應,大家總結出了經驗

body

這樣之後1em = 10px在布局等使用的時候好換算了很多

百分比也是很常見的用法,看似簡單其實有些初學者可能注意不到的知識

首先要明確百分比是相對於誰,寬泛的講是父元素,但是並不是十分準確

對於普通定位元素就是我們理解的父元素

對於position: absolute;的元素是相對於已定位的父元素(offset parent)

對於position: fixed;的元素是相對於 viewport

viewport:可視視窗,也就是瀏覽器的window那麼大

padding、margin 如果設定了百分比,會發現左右和預期一樣,用的父元素寬度的百分比,但是用的也是 ** 寬度 ** 百分比,而不是想象中的高度的百分比

後代元素繼承的是百分比計算後的值,而不是原百分比,這個對於line-height的時候經常會遇到坑,還有這樣的面試題問你line-height設定為120%1.2的區別

em是個很不錯的單位,但是有個問題就是可能會帶來混亂,因為em依賴於父元素的字型大小,各個元素父元素的字型尺寸不一定一樣,會帶來布局上很大的不確定性

remfont size of the root element

rem相對於根元素html(網頁),這樣使用起來就安全了很多

html

body

h1 ie9+ 和現代瀏覽器都已經支援了

vw和vh會隨著viewport變化自動變化,再也不用js控制全屏神馬的了

甚至有些人喪心病狂的字型大小都用vw和vh控制,來達到字型和viewport大小同步的效果

ie10+ 和現代瀏覽器都支援這兩個單位

這兩個單位是針對vw和vh

這兩個屬性也會隨著viewport變化

ie10+ 和現代瀏覽器都已經支援vmin

webkit瀏覽器之前不支援vmax,現在已經支援,所有現代瀏覽器已經支援,但是ie ** 全部 ** 不支援vmax

這兩個單位時根據 ** 當前font-family** 的相對單位

font-family改變的時候這兩個單位的值也會變化,不同字型表現的樣式不一樣

ie9+ 和現代瀏覽器都已經支援

寫的時候介紹了一些,大神寫了測試頁面可以幫我們直觀的看到

7 css units you might not know about

css的長度單位

你可能不知道的7個css單位

你可能沒注意的CSS單位

css中的單位我們經常用到px pt em 百分比,px和pt不用多說 em是相對單位,參考物是父元素的font size,具有繼承的特點 如果字型大小是16px 瀏覽器的預設值 那麼1em 16px 這樣使用換算很複雜,尤其是和px對應,大家總結出了經驗 body 這樣之後1em 10px在布局等...

7個你可能不認識的CSS單位

今兒,我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位,類似pixel 和 em 這樣的,但是很有可能你之前從來就沒聽過這些傢伙們!就讓我們一起來交個朋友吧 我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前物件內文字的字型大小。炒個栗子,如果你給body...

7個你可能不認識的CSS單位

眾所周知css技術我們雖然很熟悉,在使用的過程卻很容易被困住,這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展,對於新技術新解決方案的要求也會不斷增長。因此,作為網頁設計師和前端開發人員,我們別無選擇,必須熟悉我們手上的工具,做到知己知彼,這樣才能百戰不殆。這就意味著有那麼些個特別的貨...