css中em是相對於父元素還是目前元素的大小？ （程式碼範例）
- 不言轉載
- 2018-10-24 16:58:143185瀏覽
這篇文章帶給大家的內容是關於css中em是相對於父元素還是當前元素的大小？ （程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
em是CSS中一個比較常用的相對單位，因此有必要注意一些坑點。
1em等於目前元素的字體大小，除非你在設定font-size
有很多文章說1em是等於父元素的字體大小！這種說法其實是不準確的。看以下例子：
<!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>
會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證明了1em等於目前元素的字體大小（只有一個例外，下面會講）。 字體大小和長度有什麼關係呢？字體不是一個方塊嗎？實際上，字體大小被定義為M的寬度。
為了避免這種事情發生，在你指定數量的時候如果使用相對單位，那麼這個單位必定不能相對於你此刻所指定的數量。你可以對老闆這樣說：「我要的數量是上一個顧客買的2倍」（類比於設定font-size: 2em）。當你買完橘子以後，又可以對老闆這樣說：「我還要一些蘋果，數量是剛才買的橘子的2倍」（類比於設定padding-bottom: 2em）。
為什麼有人誤認為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，就能證明這個特例的存在：
<!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，因為在設定font-size的時候，1em == 16px；在設定padding-bottom的時候，1em 就等於32px 了。
如果在根元素上的font-size使用em會怎麼樣呢？它沒有父元素了啊！沒關係，對於inherited properties（其中就包含font-size），在根元素上的預設值為initial，對於大部分瀏覽器，font-size的initial值就是16px。因此在設定根元素上的font-size時，它的值還是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>
以上是css中em是相對於父元素還是目前元素的大小？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除