CSS單位em是相對于父元素還是當前元素的字體大小？

yvonne 發布于2019-08-29 17:03 / 1179人閱讀

摘要：這個時候水果店老板估計就要崩潰了，他到底要給你裝多少橘子呢為了避免這種事情發生，在你指定數量的時候如果使用相對單位，那這個單位必定不能相對于你此刻所指定的數量。

em是CSS中一個比較常用的相對單位，因此有必要注意一些坑點。

1em等于當前元素的字體大小，除非你在設置font-size

有很多文章說1em是等于父元素的字體大小！這種說法實際上是不準確的。看以下例子：





    
    
    
    Document

會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證明了1em等于當前元素的字體大小（只有一個例外，下面會講）。

字體大小和長度有什么關系呢？字體不是一個方塊嗎？實際上，字體大小被定義為M的寬度。

為什么有人誤認為1em等于父元素的字體大小呢？這是因為如果在設置font-size的時候使用em單位，此時font-size還是默認值inherit，因此此時1em還等于父元素的字體大小。這是在設置font-size時才有的特例！這個特例很好理解，畢竟我正在設置當前元素的字體大小呢！總不能使用此刻正在設置的字體大小作為單位吧！這不是悖論嗎！

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

除了這個特例以外，當設置其他css屬性的時候，1em就等于當前元素的字體大小。

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





    
    
    
    Document

最終高度依然是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。





    
    
    
    Document

參考資料

https://developer.mozilla.org...

https://www.w3cplus.com/css/r...

GPU云服務器云服務器 js取元素相對位置元素大小 css元素 js取原生當前元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114075.html

<em>CSSem> 單位

摘要：概覽中的長度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對單位，不會因為其他元素的尺寸變化而變化。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣這正是和單位所提供的。和現代瀏覽器都支持這兩個單位。概覽 CSS中的長度單位有很多，覺得有必要整理備忘。網上介紹的也比較多和全，詳見參考資料。單位大體分為兩大類：絕對單位，不會因為其他元素的尺寸變化而變化。相對...

ARGUS 2019-08-28 18:23 評論0 收藏0
<em>CSSem>的一些單位

摘要：你確定，是相對于父元素的大小在我們寫樣式修飾的時候，長度單位像是我們常用的。那么它們有什么不同的地方呢像素。你確定，EM是相對于父元素的大小？在我們寫樣式修飾的時候，長度單位像PX、EM、REM是我們常用的。那么它們有什么不同的地方呢？ 1、PX 像素。相對長度單位，相對于顯示器的屏幕分辨率的大小 IE無法調整那些使用px作為單位的字體大小國外大部分的網站能夠調整的原因在于其使...

andot 2019-08-30 11:21 評論0 收藏0
關于<em>CSSem>中的字體尺寸設置

摘要：常用單位在中可以用很多不同的方式來設定字體的尺寸。當你為一個元素添加單位時，應當考慮到所有父元素的字體尺寸。例寬度是中新提出的一個單位，通過寬度來計算字體尺寸。個人翻譯，轉載請注明出處英文原文：CSS Font Sizing 寫在前面上一篇文章如何做好移動端的響應式設計：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來在CSS中設定字體...

mcterry 2019-08-28 18:09 評論0 收藏0
自適應網頁設計

摘要：一允許網頁寬度自動調整首先，在網頁代碼的頭部，加入一行標簽。四選擇加載自適應網頁設計的核心，就是引入的模塊。參考自自適應網頁設計基于等視區相對單位的響應式排版和布局一、允許網頁寬度自動調整首先，在網頁代碼的頭部，加入一行viewport標簽。　　 viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始...

Euphoria 2019-08-29 11:26 評論0 收藏0
自適應網頁設計

摘要：一允許網頁寬度自動調整首先，在網頁代碼的頭部，加入一行標簽。四選擇加載自適應網頁設計的核心，就是引入的模塊。參考自自適應網頁設計基于等視區相對單位的響應式排版和布局一、允許網頁寬度自動調整首先，在網頁代碼的頭部，加入一行viewport標簽。　　 viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始...

wenshi11019 2019-08-01 15:51 評論0 收藏0