css中em指的是什么意思

小編給大家分享一下css中em指的是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為巴彥淖爾等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及巴彥淖爾網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都做網(wǎng)站、巴彥淖爾網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

em是css中的一個相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸；如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器默認(rèn)字體尺寸?？梢宰饔迷趙idth、height、line-height、margin、border等樣式的設(shè)置上。

CSS中有眾多單位，常用的px是絕對單位，em則是相對單位。在響應(yīng)式和移動端的大前提下，使用em能夠更方便快捷的一次性調(diào)整web文檔極其HTML元素的字體大小、寬度、邊距、邊框等一系列屬性，可以說在某些方面，使用em作為單位比px更靈活。

一、什么是em

---

1.em的長度

em是CSS中的一個相對單位，它的單位長度是根據(jù)元素的文本垂直長度來決定的?？梢宰饔迷趙idth、height、line-height、margin、padding、border等樣式的設(shè)置上。

1em=元素中文本的1個垂直高度

根據(jù)上面的規(guī)則：如果元素中文本的大小為16px，那么1em=16px;如果元素中文本大小為20px,那么1em=20px……

2.em與HTML文本大小默認(rèn)值

瀏覽器中的文本一般默認(rèn)為16px，也就是說，默認(rèn)的情況下：

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:

需要注意的是，子元素p繼承了父元素body的font-size，所以其實(shí)在p的樣式表中隱含了一句“font-size: 12px;”?，F(xiàn)在如果顯性的為子元素設(shè)置font-size的話，那么子元素將按照自己的font-size計算em的絕對長度。eg:

注意上例中p的font-size使用了px作為單位，那如果想使用em怎么辦呢？需要注意的是，在設(shè)置font-size中使用em作為單位，那么em將是其父元素font-size的相對值。eg:

子元素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也就不奇怪了。

事實(shí)上，不僅是width，子元素中除了font-size的em是根據(jù)父元素的font-size確定的，其他所有em都是根據(jù)自身的font-size確定的。

二、根據(jù)px計算出正確的em

---

1.使用PXtoEM計算器

使用在線工具PXtoEM（http://pxtoem.com/）可以輕松快捷的根據(jù)px計算出所需要的em值。

2.手動計算em

由下面的例子可以反向推導(dǎo)出px轉(zhuǎn)em的計算公式

px = 參考文本大小 * em　　=>　　em = px / 參考文本大小

3.注意事項(xiàng)

上面的公式中，“ 參考文本大小”需要格外注意：

• 如果元素自身設(shè)置了font-size，那么參考文本大小就是自身的font-size大小

• 如果元素自身沒有設(shè)置font-size，那么參考文本大小就是父元素的font-size大小

• 為元素設(shè)置font-size時，如果使用em作為單位，那么參考文本大小是父元素的font-size大小

以上是“css中em指的是什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：css中em指的是什么意思
文章網(wǎng)址：http://www.jiaotiyi.com/article/jejehs.html