溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“css中em相對(duì)單位怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
em是CSS中一個(gè)比較常用的相對(duì)單位，因此有必要注意一些坑點(diǎn)。
1em等于當(dāng)前元素的字體大小，除非你在設(shè)置font-size
有很多文章說(shuō)1em是等于父元素的字體大小！這種說(shuō)法實(shí)際上是不準(zhǔn)確的?？匆韵吕樱?/p>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-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倍”（類比于設(shè)置font-size:2em）。這個(gè)時(shí)候水果店老板估計(jì)就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發(fā)生，在你指定數(shù)量的時(shí)候如果使用相對(duì)單位，那這個(gè)單位必定不能相對(duì)于你此刻所指定的數(shù)量。你可以對(duì)老板這樣說(shuō)：“我要的數(shù)量是上一個(gè)顧客買的2倍”（類比于設(shè)置font-size:2em）。當(dāng)你買完橘子以后，又可以對(duì)老板這樣說(shuō)：“我還要一些蘋果，數(shù)量是剛才買的橘子的2倍”（類比于設(shè)置padding-bottom:2em）。
除了這個(gè)特例以外，當(dāng)設(shè)置其他css屬性的時(shí)候，1em就等于當(dāng)前元素的字體大小。
在上面的例子中，設(shè)置font-size的時(shí)候使用em，就能證明這個(gè)特例的存在：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-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ì)于inheritedproperties（其中就包括font-size），在根元素上的默認(rèn)值為initial，對(duì)于大部分瀏覽器，font-size的initial值就是16px。因此在設(shè)置根元素上的font-size時(shí)，它的值還是16px，1em也就等于16px
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-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>
“css中em相對(duì)單位怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(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)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
