首頁 > 文章 > web前端 > css中em什麼意思

css中em什麼意思

青灯夜游原創: 2021-04-02 15:17:1019335瀏覽

em是css中的一個相對長度單位，相對於當前物件內文字的字體尺寸；如當前對行內文字的字體尺寸未被人為設置，則相對於瀏覽器預設字體尺寸。可以作用在width、height、line-height、margin、border等樣式的設定上。

css中em什麼意思

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

一、什麼是em

#1.em的長度

em是CSS中的一個相對單位，它的單位長度是根據元素的文字垂直長度來決定的。可以作用在width、height、line-height、margin、padding、border等樣式的設定上。

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

根據上面的規則：如果元素中文字的大小為16px，那麼1em=16px;如果元素中文字大小為20px,那麼1em=20px…

#2.em與HTML文字大小預設值

瀏覽器中的文字一般預設為16px，也就是說，預設的情況下：

1em=16px

那如何改變這個設定呢？只要顯式的設定body元素的font-size即可。 eg:

body {
    font-size: 24px;
    width: 10em;    /* 10em = 24px * 10 = 240px */
}

3.em與繼承

在CSS中，如果一個元素沒有設定font-size，那麼它的font-size值就是它父元素的font-size值，這很好理解，就是簡單的繼承而已。 eg:

<style>
    body {
        font-size: 12px;
    }
    div {
        /* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
        width: 10em;    /* 10em = 12px * 10 = 120px */
    }
</style>
<body>
    <div></div>
</body>

要注意的是，子元素p繼承了父元素body的font-size，所以其實在p的樣式表中隱含了一句「font-size: 12px;」。現在如果顯性的為子元素設定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怎麼辦呢？需要注意的是，在設定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是根據其父元素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是根據父元素的font-size決定的，其他所有em都是根據自身的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>

（學習影片分享：css影片教學）

#二、根據px計算正確的em

1.使用PXtoEM計算器

使用線上工具PXtoEM（http://pxtoem.com/）可以輕鬆快速的根據px計算出所需的em值。

2.手動計算em

由下面的範例可以反向推導出px轉em的計算公式

<style>
    div {
        font-size: 16px;
        width: 2em; /* 2em = 16px * 2 = 32px */
    }
</style>

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

3.注意事項

上面的公式中，「參考文字大小」需要格外注意：

如果元素本身設定了font-size，那麼參考文字大小就是自身的font-size大小
如果元素本身沒有設定font-size，那麼參考文字大小就是父元素的font-size大小
為元素設定font-size時，如果使用em作為單位，那麼參考文字大小就是父元素的font-size大小

更多程式相關知識，請造訪：程式設計影片！！

以上是css中em什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html 继承对象样式表 margin padding border http

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：什麼是css初始化下一篇：什麼是css初始化

看更多