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 相對長度單位...