css中font-size字體單位和line-height有什么用

發(fā)布時間：2021-03-19 09:32:43 來源：億速云閱讀：271 作者：小新欄目：web開發(fā)

小編給大家分享一下css中font-size字體單位和line-height有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

px(pixel)像素

相信大家對像素這個名詞并不陌生,接下來來介紹下這個單位的一些小知識點:

pixel 是 picture(圖片)和element(元素)這兩個詞組成的.pixel不是絕對的自然長度單位,例如同樣1 px的尺寸在不同設備上的"自然長度"是不一樣的.當你放大一個圖片后會發(fā)現(xiàn)圖片是由一個個小方塊組成,每個小方塊就是1px,放大的程度越大1px的自然長度越大. 因此同樣的一個自然長度的圖片里面包含的像素越多,這個圖片就越清晰.

相對于當前對象內(nèi)文本的字體尺寸.也可以理解為是一個百分比單位, 1em=100%.那么來介紹下在css樣式中em呈現(xiàn)的是什么樣的效果吧:

如果當前子元素沒有設置字體大小(瀏覽器默認字體大小為16px),那么子元素設置字體大小:font-size:1em;,這時候子元素的字體大小就為父元素的100% x 16px= 16px; 以此類推,font-size:1.5em;,子元素字體大小就為24px;

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

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

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

在css樣式中l(wèi)ine-height直接書寫數(shù)字

對于font-size來說這種做法是錯誤的,并不會響應.

但是line-height除了有以上的單位設置以外,還可以不設置單位,直接書寫數(shù)字.

在line-height中em 同樣是相對于當前字體大小的一個比例,并且繼承的是px固定值,子元素不會繼承em的值.

但是line-height:2;是可以繼承的, 子元素繼承這個后, line-height值是當前字體大小的兩倍.

以上是“css中font-size字體單位和line-height有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

css中font-size字體單位和line-height有什么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽