溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中em代表的是什么意思

發(fā)布時(shí)間：2021-01-25 10:30:43 來(lái)源：億速云 閱讀：206 作者：小新 欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css中em代表的是什么意思，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

em是CSS中一個(gè)比較常用的相對(duì)單位，因此有必要注意一些坑點(diǎn)。

1em等于當(dāng)前元素的字體大小，除非你在設(shè)置font-size

有很多文章說(shuō)1em是等于父元素的字體大?。∵@種說(shuō)法實(shí)際上是不準(zhǔn)確的。看以下例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 32px;
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

<div>會(huì)被padding-bottom撐開(kāi)，而padding-bottom的高度是64px，而不是32px！這證明了1em等于當(dāng)前元素的字體大?。ㄖ挥幸粋€(gè)例外，下面會(huì)講）。

字體大小和長(zhǎng)度有什么關(guān)系呢？字體不是一個(gè)方塊嗎？實(shí)際上，字體大小被定義為M的寬度。

為什么有人誤認(rèn)為1em等于父元素的字體大小呢？這是因?yàn)槿绻谠O(shè)置font-size的時(shí)候使用em單位，此時(shí)font-size還是默認(rèn)值inherit，因此此時(shí)1em還等于父元素的字體大小。這是在設(shè)置font-size時(shí)才有的特例！這個(gè)特例很好理解，畢竟我正在設(shè)置當(dāng)前元素的字體大小呢！怎么能用此刻正在設(shè)置的字體大小作為單位呢！這不是悖論嗎！

舉個(gè)例子，如果這個(gè)悖論真的發(fā)生了，就會(huì)出現(xiàn)以下情況：水果店老板對(duì)你說(shuō)：“你要多少斤橘子，我給你裝起來(lái)”，而你卻對(duì)老板說(shuō)：“我要的數(shù)量是我最終要的數(shù)量的2倍”（類(lèi)比于設(shè)置font-size: 2em）。這個(gè)時(shí)候水果店老板估計(jì)就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發(fā)生，在你指定數(shù)量的時(shí)候如果使用相對(duì)單位，那這個(gè)單位必定不能相對(duì)于你此刻所指定的數(shù)量。你可以對(duì)老板這樣說(shuō)：“我要的數(shù)量是上一個(gè)顧客買(mǎi)的2倍”（類(lèi)比于設(shè)置font-size: 2em）。當(dāng)你買(mǎi)完橘子以后，又可以對(duì)老板這樣說(shuō)：“我還要一些蘋(píng)果，數(shù)量是剛才買(mǎi)的橘子的2倍”（類(lèi)比于設(shè)置padding-bottom: 2em）。

除了這個(gè)特例以外，當(dāng)設(shè)置其他css屬性的時(shí)候，1em就等于當(dāng)前元素的字體大小。

在上面的例子中，設(shè)置font-size的時(shí)候使用em，就能證明這個(gè)特例的存在：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 2em;  /* 僅僅這一行改變了！ */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

最終高度依然是64px，因?yàn)樵谠O(shè)置font-size的時(shí)候，1em == 16px；在設(shè)置padding-bottom的時(shí)候，1em 就等于 32px 了。

如果在根元素上的font-size使用em會(huì)怎么樣呢？它沒(méi)有父元素了啊！沒(méi)關(guān)系，對(duì)于inherited properties（其中就包括font-size），在根元素上的默認(rèn)值為initial，對(duì)于大部分瀏覽器，font-size的initial值就是16px。因此在設(shè)置根元素上的font-size時(shí)，它的值還是16px，1em也就等于16px

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            /* 2*16px=32px */
            font-size: 2em;
        }
        div {
            /* 2*32px=64px */
            font-size: 2em;
            /* 2*64px=128px */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>

關(guān)于“css中em代表的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手