在css3中，em是一個(gè)相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，也就是font-size設(shè)置的大?。蝗绻?dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
本教程操作環(huán)境：windows7系統(tǒng)、css3&&html5版、dell g3電腦。
css em單位
em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，也就是font-size設(shè)置的大小。它的單位長(zhǎng)度是根據(jù)元素的文本文字垂直長(zhǎng)度來(lái)決定的。
如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則尋找父級(jí)的font-size，如果沒(méi)有父級(jí)或者父級(jí)沒(méi)有設(shè)置font-size，就相對(duì)于瀏覽器的默認(rèn)字體尺寸(16px)。
例如1：默認(rèn)狀態(tài)下直接給內(nèi)部p寬高10em
examp-01 源碼<!doctype html><html><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <title>example 01</title> <style> #app{ width: 10em; height: 10em; background-color: bisque; } </style></head><body> <div id=\”app\”></div></body></html>
inspect 截圖如下：
可以看到，我們給了 #app p的寬高都是10em。瀏覽器渲染后他們的寬高都是160px。這個(gè)大小正好是16px的10倍。 這個(gè)大小正是瀏覽器默認(rèn)的 font-size 的 16px。
example-02 源碼：<!doctype html><html><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <title>example 01</title> <style> #app{ font-size: 12px; width: 10em; height: 10em; background-color: bisque; } </style></head><body> <div id=\”app\”></div></body></html>
inspect 截圖：
這兩個(gè)例子足矣。
（學(xué)習(xí)視頻分享：css視頻教程）