在css3中，em是一個相對長度單位，相對于當前對象內(nèi)文本的字體尺寸，也就是font-size設置的大??；如果當前對行內(nèi)文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
本教程操作環(huán)境：windows7系統(tǒng)、css3&&html5版、dell g3電腦。
css em單位
em是相對長度單位，相對于當前對象內(nèi)文本的字體尺寸，也就是font-size設置的大小。它的單位長度是根據(jù)元素的文本文字垂直長度來決定的。
如當前對行內(nèi)文本的字體尺寸未被人為設置，則尋找父級的font-size，如果沒有父級或者父級沒有設置font-size，就相對于瀏覽器的默認字體尺寸(16px)。
例如1：默認狀態(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。這個大小正好是16px的10倍。 這個大小正是瀏覽器默認的 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 截圖：
這兩個例子足矣。
（學習視頻分享：css視頻教程）