常用css單位

2021-06-29 16:34:02 字數 1283 閱讀 9616

div中的字型大小是1.2em,也就是div從父類元素繼承的字型大小的1.2倍。在這裡,body的字型是14px,那麼div的字型大小是1.2*14=16.8px.

注意:用em一層一層級聯得定義巢狀元素的字型大小

解決方法就是 em 換做 rem

rem

rem中的r代表根元素,它的值就是根元素設定的字型大小。在大多數情況下,根元素就是html了。

html

div

rem不僅適用於字型大小,也用於網格布局。

width:

70rem

;// 70 * 14px = 980px

你可以用基於html根元素字型大小的rem作為整個網格布局或者ui庫的大小單位,然後在其他特定的地方用em單位。這樣將會給你帶來更多的字型大小和伸縮的可控性

letter-spacing和word-spacing

letter-spacing和word-spacing這兩個屬性都用來新增他們對應的元素中的空白。letter-spacing新增字母之間的空白,而word-spacing新增每個單詞之間的空白。請大家注意,word-spacing對中文無效。

letter-spacing

語法:letter-spacing : normal | length 

引數:normal :  預設間隔

length :  由浮點數字和單位識別符號組成的長度值,允許為負值。請參閱長度單位

說明:檢索或設定物件中的文字之間的間隔。

該屬性將指定的間隔新增到每個文字之後,但最後乙個字將被排除在外。

對應的指令碼特性為letterspacing。

word-spacing

語法:word-spacing : normal | length 

引數:normal :  預設間距

length :  由浮點數字和單位識別符號組成的長度值,允許為負值。請參閱長度單位

說明:檢索或設定物件中的單詞之間插入的空格數。對於ie4+而言僅在mac平台上可用。

對應的指令碼特性為wordspacing。

比較:

letter-spacing定義了字與字之間的距離.

word-spacing是控制字與字之間空格的寬度.



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...

常用CSS長度單位

em 相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。ex 相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。px 畫素 pixel 相對長度單位...