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