css中字體常用單位有:1、px(像素),是固定大小的單位;2、em,相對長度單位,相對于父級元素的字體大??;3、rem,相對長度單位,是相對于根節(jié)點(或者是html節(jié)點)的字體大?。?、%%uff0c相對長度單位,相對于父級元素。
相關(guān)推薦:《css視頻教程》
一、css中字體常用單位px、em、rem和%
1、px(像素)
px單位的名稱為像素,它是一個固定大小的單元,像素的計算是針對(電腦/手機(jī))屏幕的,一個像素(1px)就是(電腦/手機(jī))屏幕上的一個點,即屏幕分辨率的最小分割。由于它是固定大小的單位,單獨用它來設(shè)計的網(wǎng)頁,如果適應(yīng)大屏幕(電腦),在小屏幕(手機(jī))上就會很不友好,做不到自適應(yīng)的效果。
示例:
<!doctype html><html> <head> <meta charset="utf-8" /> <title>css px像素固定長度單位</title> <style type="text/css"> body{background-color: #aaa;} .px{border:1px solid red;width:300px;height:100px;font-size:30px;} </style> </head> <body> <div class="px"> 用px單位設(shè)置元素的寬高和文本的字體大小 </div> </body></html>運行結(jié)果:
2、em(相對長度單位)
em單位用的也比較多,特別是國外;em單位的名稱為相對長度單位,它是用來設(shè)置文本的字體尺寸的,相對于父級元素對象內(nèi)文本的字體尺寸;如果沒有人為設(shè)置當(dāng)前對象內(nèi)文本的字體尺寸,那么它相對的是瀏覽器默認(rèn)的字體尺寸(16px)。
示例:
<!doctype html><html> <head> <meta charset="utf-8" /> <title>用em相對長度單位來設(shè)置文本的字體大小</title> <style type="text/css"> body{background-color: #aaa;} .div{border:1px solid red;width:300px;height:100px;font-size:30px;} .em{font-size:0.5em;}/*30px x 0.5 = 15px*/ </style> </head> <body> <div class="div"> <span class="em">用em相對長度單位來設(shè)置文本的字體大小</span> </div> </body></html>運行結(jié)果:
說明:以上實例em是相對于父級元素div的,div設(shè)置的字體大小為30px,所以0.5em計算后的字體大小為:30px x 0.5 = 15px
3、rem(css3新增的相對長度單位)
rem是css3新增的一個相對長度單位,它的出現(xiàn)是為了解決em的缺點,em可以說是相對于父級元素的字體大小,當(dāng)父級元素字體大小改變時,又得重新計算。rem出現(xiàn)就可以解決這樣的問題,rem只相對于根節(jié)點,即html元素。所以只要在html標(biāo)簽上設(shè)置字體大小,文檔中的字體大小都會以此為參照標(biāo)準(zhǔn),一般用于自適應(yīng)布局。
<!doctype html><html> <head> <meta charset="utf-8" /> <title>用css3新增的相對長度單位rem來設(shè)置文本的字體大小</title> <style type="text/css"> body{background-color: #aaa;} .div{border:1px solid red;width:300px;height:100px;font-size:30px;} .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ </style> </head> <body> <div class="div"> <span class="rem">用rem相對長度單位來設(shè)置文本的字體大小</span> </div> </body></html>
說明:rem是相對于根元素html元素的,瀏覽器一般默認(rèn)字體大小為16px,所有0.5rem的計算后的字體大小為:16px x 0.5 = 8px,跟父元素設(shè)定的30px沒有關(guān)系
4、%%uff08百分比)
%%u4e5f很常見,它和em差不多一樣,都是相對于父級元素。但%%u53ef以在很多屬性中使用,比如:width、height、font-size等。而em是用來設(shè)置字體大?。╢ont-size)的單位,width、height等屬性是沒有em單位的。
二、px、em、rem和%%u7684區(qū)別與總結(jié)
px是固定長度單位,不隨其它元素的變化而變化;
em和%%u662f相對于父級元素的單位,會隨父級元素的屬性(font-size或其它屬性)變化而變化;
rem是相對于根目錄(html元素)的,所有它會隨html元素的屬性(font-size)變化而變化;
px和%%u7528的比較廣泛一些,可以充當(dāng)更多屬性的單位,而em和rem是字體大小的單位,用于充當(dāng)font-size屬性的單位
一般來說:1em = 1rem = 100% = 16 px
更多編程相關(guān)知識,請訪問:編程視頻??!