本篇內(nèi)容介紹了“css中em相對(duì)單位怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
目前創(chuàng)新互聯(lián)建站已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、廣東網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
em是CSS中一個(gè)比較常用的相對(duì)單位，因此有必要注意一些坑點(diǎn)。
1em等于當(dāng)前元素的字體大小，除非你在設(shè)置font-size
有很多文章說1em是等于父元素的字體大??！這種說法實(shí)際上是不準(zhǔn)確的?？匆韵吕樱?/p>
字體大小和長(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ì)你說：“你要多少斤橘子，我給你裝起來”，而你卻對(duì)老板說：“我要的數(shù)量是我最終要的數(shù)量的2倍”（類比于設(shè)置font-size:2em）。這個(gè)時(shí)候水果店老板估計(jì)就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發(fā)生，在你指定數(shù)量的時(shí)候如果使用相對(duì)單位，那這個(gè)單位必定不能相對(duì)于你此刻所指定的數(shù)量。你可以對(duì)老板這樣說：“我要的數(shù)量是上一個(gè)顧客買的2倍”（類比于設(shè)置font-size:2em）。當(dāng)你買完橘子以后，又可以對(duì)老板這樣說：“我還要一些蘋果，數(shù)量是剛才買的橘子的2倍”（類比于設(shè)置padding-bottom:2em）。
除了這個(gè)特例以外，當(dāng)設(shè)置其他css屬性的時(shí)候，1em就等于當(dāng)前元素的字體大小。
在上面的例子中，設(shè)置font-size的時(shí)候使用em，就能證明這個(gè)特例的存在：
最終高度依然是64px，因?yàn)樵谠O(shè)置font-size的時(shí)候，1em==16px；在設(shè)置padding-bottom的時(shí)候，1em就等于32px了。
如果在根元素上的font-size使用em會(huì)怎么樣呢？它沒有父元素了啊！沒關(guān)系，對(duì)于inheritedproperties（其中就包括font-size），在根元素上的默認(rèn)值為initial，對(duì)于大部分瀏覽器，font-size的initial值就是16px。因此在設(shè)置根元素上的font-size時(shí)，它的值還是16px，1em也就等于16px
“css中em相對(duì)單位怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
重慶分公司
重慶分公司
