css中一些常用的font-size字體單位和line-height詳解
我要評(píng)論px(pixel)像素
相信大家對(duì)像素這個(gè)名詞并不陌生,接下來(lái)來(lái)介紹下這個(gè)單位的一些小知識(shí)點(diǎn):
pixel 是 picture(圖片)和element(元素)這兩個(gè)詞組成的.pixel不是絕對(duì)的自然長(zhǎng)度單位,例如同樣1 px的尺寸在不同設(shè)備上的"自然長(zhǎng)度"是不一樣的.當(dāng)你放大一個(gè)圖片后會(huì)發(fā)現(xiàn)圖片是由一個(gè)個(gè)小方塊組成,每個(gè)小方塊就是1px,放大的程度越大1px的自然長(zhǎng)度越大. 因此同樣的一個(gè)自然長(zhǎng)度的圖片里面包含的像素越多,這個(gè)圖片就越清晰.
em
相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸.也可以理解為是一個(gè)百分比單位, 1em=100%.那么來(lái)介紹下在css樣式中em呈現(xiàn)的是什么樣的效果吧:
如果當(dāng)前子元素沒有設(shè)置字體大小(瀏覽器默認(rèn)字體大小為16px),那么子元素設(shè)置字體大小:font-size:1em;,這時(shí)候子元素的字體大小就為父元素的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
父元素的字體大小會(huì)繼承給子元素,但是繼承的是px值,不是em的值.怎么理解呢?
body{2em}
<body>
<div>
<p></p>
</div>
</body>
那么body里面的子元素div 和 p 都是32px(不疊加)
rem
雖然同樣是相對(duì)于字體大小的百分比,與em相似,但是參照對(duì)象不同.rem的參照對(duì)象不是父元素,因此無(wú)論父元素如何變化當(dāng)前設(shè)置rem的元素字體大小并不會(huì)有響應(yīng).
rem是相對(duì)于根元素(也就是html)值改變的.當(dāng)我們書寫html文檔時(shí),head和body 都是被<html></html>標(biāo)簽包裹的.
在css樣式中我們同樣可以更改html的font-size
html{
font-size:10px;
}
div{
font-size:2rem;
}
此時(shí),div的字體大小是20px;
在css樣式中l(wèi)ine-height直接書寫數(shù)字
對(duì)于font-size來(lái)說(shuō) 這種做法是錯(cuò)誤的,并不會(huì)響應(yīng).
但是line-height除了有以上的單位設(shè)置以外,還可以不設(shè)置單位,直接書寫數(shù)字.
在line-height中em 同樣是相對(duì)于當(dāng)前字體大小的一個(gè)比例,并且繼承的是px固定值,子元素不會(huì)繼承em的值.
但是line-height:2;是可以繼承的, 子元素繼承這個(gè)后, line-height值是當(dāng)前字體大小的兩倍.
總結(jié)
到此這篇關(guān)于css中一些常用的font-size字體單位和line-height的文章就介紹到這了,更多相關(guān)css font-size 和line-height內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版
本篇文章主要介紹了使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-18- 這篇文章主要介紹了CSS中的font-size屬性使用教程,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-13
- 這篇文章主要介紹了CSS的font-size屬性及其em值的使用,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-05
CSS Font-Size: em、px 、pt 、Percent之間的關(guān)系及換算
這篇文章主要介紹了CSS Font-Size: em、 px 、pt 、Percent之間的關(guān)系及換算，本篇整理的還是比較詳細(xì)的，需要的朋友可以參考下2014-05-15- CSS的字體樣式設(shè)置相信許多人再熟悉不過，其實(shí)字體樣式的設(shè)置并不僅僅限于我們平時(shí)常用的那幾個(gè)屬性，本文為您詳細(xì)敘述 font-size 的字體樣式設(shè)置的詳細(xì)屬性。2009-08-29
- 這篇文章主要介紹了一行代碼搞定 font-size 響應(yīng)式,該屬性設(shè)置元素的字體大小,font-size 屬性可設(shè)置字體的尺寸,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-09
