站長資訊網(wǎng)em是css中的一個相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸；如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器默認字體尺寸?？梢宰饔迷趙idth、height、line-height、margin、border等樣式的設(shè)置上。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應(yīng)式和移動端的大前提下，使用em能夠更方便快捷的一次性調(diào)整web文檔極其HTML元素的字體大小、寬度、邊距、邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。
一、什么是em
1.em的長度
em是CSS中的一個相對單位，它的單位長度是根據(jù)元素的文本垂直長度來決定的。可以作用在width、height、line-height、margin、padding、border等樣式的設(shè)置上。
1em=元素中文本的1個垂直高度
根據(jù)上面的規(guī)則：如果元素中文本的大小為16px，那么1em=16px;如果元素中文本大小為20px,那么1em=20px……
2.em與HTML文本大小默認值
瀏覽器中的文本一般默認為16px，也就是說，默認的情況下：
1em=16px
那如何改變這個設(shè)定呢？只要顯式的設(shè)置body元素的font-size即可。eg:
body { font-size: 24px; width: 10em; /* 10em = 24px * 10 = 240px */ }
3.em與繼承
在CSS中，如果一個元素沒有設(shè)置font-size，那么它的font-size值就是它父元素的font-size值，這很好理解，就是簡單的繼承而已。eg:
<style> body { font-size: 12px; } div { /* 該元素沒有設(shè)置font-size，因此繼承了父元素的font-size: 12px; */ width: 10em; /* 10em = 12px * 10 = 120px */ } </style> <body> <div></div> </body>
需要注意的是，子元素p繼承了父元素body的font-size，所以其實在p的樣式表中隱含了一句“font-size: 12px;”?，F(xiàn)在如果顯性的為子元素設(shè)置font-size的話，那么子元素將按照自己的font-size計算em的絕對長度。eg:
<style> body { font-size: 12px; } div { font-size: 20px; width: 10em; /* 10em = 20px * 10 = 200px */ } </style> <body> <div></div> </body>
注意上例中p的font-size使用了px作為單位，那如果想使用em怎么辦呢？需要注意的是，在設(shè)置font-size中使用em作為單位，那么em將是其父元素font-size的相對值。eg:
<style> body { font-size: 12px; } div { font-size: 2em; /* 2em = 12px * 2 = 24px */ width: 10em; /* 10em = 24px * 10 = 240px */ } </style> <body> <div></div> </body>
子元素p的font-size是根據(jù)其父元素body的font-size確定的，因此2em = 12px * 2, = 24px；而p的width是相對于自己的font-size確定的，因此10em = ( 12px * 2 ) * 10 = 240px。所以p中2em=24px，10em=240px也就不奇怪了。
事實上，不僅是width，子元素中除了font-size的em是根據(jù)父元素的font-size確定的，其他所有em都是根據(jù)自身的font-size確定的。
<style> body { font-size: 16px; } div { font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */ width: 10em; /* 10em = 20px * 10 = 200px */ height: 5em; /* 5em = 20px * 5 = 100px */ border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */ margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */ padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */ line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */ } </style> <body> <div></div> </body>
（學(xué)習(xí)視頻分享：css視頻教程）
二、根據(jù)px計算出正確的em
1.使用PXtoEM計算器
使用在線工具PXtoEM（http://pxtoem.com/）可以輕松快捷的根據(jù)px計算出所需要的em值。
2.手動計算em
由下面的例子可以反向推導(dǎo)出px轉(zhuǎn)em的計算公式
<style> div { font-size: 16px; width: 2em; /* 2em = 16px * 2 = 32px */ } </style>
px = 參考文本大小 * em => em = px / 參考文本大小
3.注意事項
上面的公式中，“ 參考文本大小”需要格外注意：
-
如果元素自身設(shè)置了font-size，那么參考文本大小就是自身的font-size大小
-
如果元素自身沒有設(shè)置font-size，那么參考文本大小就是父元素的font-size大小
-
為元素設(shè)置font-size時，如果使用em作為單位，那么參考文本大小是父元素的font-size大小
