這篇文章帶給大家的內容是關於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>
為什麼有人誤認為1em等於父元素的字體大小呢?這是因為如果在設定font-size的時候使用em單位,此時font-size還是預設值inherit,因此此時1em還等於父元素的字體大小。這是在設定font-size時才有的特例!這個特例很好理解,畢竟我正在設定當前元素的字體大小呢!怎麼能用此刻正在設定的字體大小作為單位呢!這不是悖論嗎!
舉個例子,如果這個悖論真的發生了,就會出現以下情況:水果店老闆對你說:“你想要多少斤橘子,我給你裝起來”,而你卻對老闆說: 「我要的數量是我最終要的數量的2倍」(類比於設定font-size: 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中文網其他相關文章!