本篇內容介紹了“css中em相對單位怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
em是CSS中一個比較常用的相對單位，因此有必要注意一些坑點。
1em等于當前元素的字體大小，除非你在設置font-size
有很多文章說1em是等于父元素的字體大??！這種說法實際上是不準確的?？匆韵吕樱?/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>會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證明了1em等于當前元素的字體大?。ㄖ挥幸粋€例外，下面會講）。
字體大小和長度有什么關系呢？字體不是一個方塊嗎？實際上，字體大小被定義為M的寬度。
為什么有人誤認為1em等于父元素的字體大小呢？這是因為如果在設置font-size的時候使用em單位，此時font-size還是默認值inherit，因此此時1em還等于父元素的字體大小。這是在設置font-size時才有的特例！這個特例很好理解，畢竟我正在設置當前元素的字體大小呢！怎么能用此刻正在設置的字體大小作為單位呢！這不是悖論嗎！
舉個例子，如果這個悖論真的發生了，就會出現以下情況：水果店老板對你說：“你要多少斤橘子，我給你裝起來”，而你卻對老板說：“我要的數量是我最終要的數量的2倍”（類比于設置font-size:2em）。這個時候水果店老板估計就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發生，在你指定數量的時候如果使用相對單位，那這個單位必定不能相對于你此刻所指定的數量。你可以對老板這樣說：“我要的數量是上一個顧客買的2倍”（類比于設置font-size:2em）。當你買完橘子以后，又可以對老板這樣說：“我還要一些蘋果，數量是剛才買的橘子的2倍”（類比于設置padding-bottom:2em）。
除了這個特例以外，當設置其他css屬性的時候，1em就等于當前元素的字體大小。
在上面的例子中，設置font-size的時候使用em，就能證明這個特例的存在：
<!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，因為在設置font-size的時候，1em==16px；在設置padding-bottom的時候，1em就等于32px了。
如果在根元素上的font-size使用em會怎么樣呢？它沒有父元素了??！沒關系，對于inheritedproperties（其中就包括font-size），在根元素上的默認值為initial，對于大部分瀏覽器，font-size的initial值就是16px。因此在設置根元素上的font-size時，它的值還是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相對單位怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
