css 單位解析px,em,rem

時間 2020-05-21

標籤 css 單位解析 rem 欄目 CSS 简体版

原文原文鏈接

px(pixel)像素

相信你們對像素這個名詞並不陌生,接下來來介紹下這個單位的一些小知識點:
pixel 是 picture(圖片)和element(元素)這兩個詞組成的.pixel不是絕對的天然長度單位,例如一樣1 px的尺寸在不一樣設備上的"天然長度"是不同的.當你放大一個圖片後會發現圖片是由一個個小方塊組成,每一個小方塊就是1px,放大的程度越大1px的天然長度越大. 所以一樣的一個天然長度的圖片裏面包含的像素越多,這個圖片就越清晰.css

em

相對於當前對象內文本的字體尺寸.也能夠理解爲是一個百分比單位, 1em=100%.那麼來介紹下在css樣式中em呈現的是什麼樣的效果吧:
若是當前子元素沒有設置字體大小(瀏覽器默認字體大小爲16px),那麼子元素設置字體大小:font-size:1em;,這時候子元素的字體大小就爲父元素的100% x 16px= 16px; 以此類推,font-size:1.5em;,子元素字體大小就爲24px;html

p{
    font-size:1.5em;
}
div{
    font-size:1.5em;
}
<div>
    <p>
        字體大小
    </p>
</div>

這裏的 "字體大小"就是1.5 x 1.5 x 16=36px
父元素的字體大小會繼承給子元素,可是繼承的是px值,不是em的值.怎麼理解呢?
body{2em}瀏覽器

<body>
    <div>
        <p></p>
    </div>
</body>

那麼body裏面的子元素div 和 p 都是32px(不疊加)字體

rem

雖然一樣是相對於字體大小的百分比,與em類似,可是參照對象不一樣.rem的參照對象不是父元素,所以不管父元素如何變化當前設置rem的元素字體大小並不會有響應.
rem是相對於根元素(也就是html)值改變的.當咱們書寫html文檔時,head和body 都是被<html></html>標籤包裹的.
在css樣式中咱們一樣能夠更改html的font-sizecode

html{
    font-size:10px;
}
div{
    font-size:2rem;
}

此時,div的字體大小是20px;htm

在css樣式中line-height直接書寫數字

對於font-size來講這種作法是錯誤的,並不會響應.
可是line-height除了有以上的單位設置之外,還能夠不設置單位,直接書寫數字.
在line-height中em 一樣是相對於當前字體大小的一個比例,而且繼承的是px固定值,子元素不會繼承em的值.
可是line-height:2;是能夠繼承的, 子元素繼承這個後, line-height值是當前字體大小的兩倍.對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。