溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css中font-size字體單位和line-height有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
px(pixel)像素
相信大家對像素這個名詞并不陌生,接下來來介紹下這個單位的一些小知識點:
pixel 是 picture(圖片)和element(元素)這兩個詞組成的.pixel不是絕對的自然長度單位,例如同樣1 px的尺寸在不同設備上的"自然長度"是不一樣的.當你放大一個圖片后會發現圖片是由一個個小方塊組成,每個小方塊就是1px,放大的程度越大1px的自然長度越大. 因此同樣的一個自然長度的圖片里面包含的像素越多,這個圖片就越清晰.
em
相對于當前對象內文本的字體尺寸.也可以理解為是一個百分比單位, 1em=100%.那么來介紹下在css樣式中em呈現的是什么樣的效果吧:
如果當前子元素沒有設置字體大小(瀏覽器默認字體大小為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樣式中line-height直接書寫數字
對于font-size來說 這種做法是錯誤的,并不會響應.
但是line-height除了有以上的單位設置以外,還可以不設置單位,直接書寫數字.
在line-height中em 同樣是相對于當前字體大小的一個比例,并且繼承的是px固定值,子元素不會繼承em的值.
但是line-height:2;是可以繼承的, 子元素繼承這個后, line-height值是當前字體大小的兩倍.
以上是“css中font-size字體單位和line-height有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
