資訊專(zhuān)欄INFORMATION COLUMN
摘要：這個(gè)時(shí)候水果店老板估計(jì)就要崩潰了，他到底要給你裝多少橘子呢為了避免這種事情發(fā)生，在你指定數(shù)量的時(shí)候如果使用相對(duì)單位，那這個(gè)單位必定不能相對(duì)于你此刻所指定的數(shù)量。
em是CSS中一個(gè)比較常用的相對(duì)單位，因此有必要注意一些坑點(diǎn)。
1em等于當(dāng)前元素的字體大小，除非你在設(shè)置font-size有很多文章說(shuō)1em是等于父元素的字體大小！這種說(shuō)法實(shí)際上是不準(zhǔn)確的。看以下例子：
Document
為什么有人誤認(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è)特例以外，當(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ì)怎么樣呢？它沒(méi)有父元素了?。](méi)關(guān)系，對(duì)于inherited properties（其中就包括font-size），在根元素上的默認(rèn)值為initial，對(duì)于大部分瀏覽器，font-size的initial值就是16px。因此在設(shè)置根元素上的font-size時(shí)，它的值還是16px，1em也就等于16px。 https://developer.mozilla.org... https://developer.mozilla.org... https://www.w3cplus.com/css/r... 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114075.html會(huì)被padding-bottom撐開(kāi)，而padding-bottom的高度是64px，而不是32px！這證明了1em等于當(dāng)前元素的字體大小（只有一個(gè)例外，下面會(huì)講）。
字體大小和長(zhǎng)度有什么關(guān)系呢？字體不是一個(gè)方塊嗎？實(shí)際上，字體大小被定義為M的寬度。
舉個(gè)例子，如果這個(gè)悖論真的發(fā)生了，就會(huì)出現(xiàn)以下情況：水果店老板對(duì)你說(shuō)：“你要多少斤橘子，我給你裝起來(lái)”，而你卻對(duì)老板說(shuō)：“我要的數(shù)量是我最終要的數(shù)量的2倍”。這個(gè)時(shí)候水果店老板估計(jì)就要崩潰了，他到底要給你裝多少橘子呢？
為了避免這種事情發(fā)生，在你指定數(shù)量的時(shí)候如果使用相對(duì)單位，那這個(gè)單位必定不能相對(duì)于你此刻所指定的數(shù)量。你可以對(duì)老板這樣說(shuō)：“我要的數(shù)量是上一個(gè)顧客買(mǎi)的2倍”（類(lèi)比于設(shè)置font-size: 2em）。當(dāng)你買(mǎi)完橘子以后，又可以對(duì)老板這樣說(shuō)：“我還要一些蘋(píng)果，數(shù)量是剛才買(mǎi)的橘子的2倍”（類(lèi)比于設(shè)置padding-bottom: 2em）。
參考資料
摘要：概覽中的長(zhǎng)度單位有很多，覺(jué)得有必要整理備忘。單位大體分為兩大類(lèi)絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?。如果想使用顯示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣這正是和單位所提供的。和現(xiàn)代瀏覽器都支持這兩個(gè)單位。 概覽 CSS中的長(zhǎng)度單位有很多，覺(jué)得有必要整理備忘。 網(wǎng)上介紹的也比較多和全，詳見(jiàn)參考資料。 單位大體分為兩大類(lèi)： 絕對(duì)單位 ，不會(huì)因?yàn)槠渌氐某叽缱兓兓?相對(duì)...
摘要：你確定，是相對(duì)于父元素的大小在我們寫(xiě)樣式修飾的時(shí)候，長(zhǎng)度單位像是我們常用的。那么它們有什么不同的地方呢像素。 你確定，EM是相對(duì)于父元素的大?。?在我們寫(xiě)樣式修飾的時(shí)候，長(zhǎng)度單位像PX、EM、REM是我們常用的。那么它們有什么不同的地方呢？ 1、PX 像素。相對(duì)長(zhǎng)度單位，相對(duì)于顯示器的屏幕分辨率的大小 IE無(wú)法調(diào)整那些使用px作為單位的字體大小 國(guó)外大部分的網(wǎng)站能夠調(diào)整的原因在于其使...
摘要：常用單位在中可以用很多不同的方式來(lái)設(shè)定字體的尺寸。當(dāng)你為一個(gè)元素添加單位時(shí)，應(yīng)當(dāng)考慮到所有父元素的字體尺寸。例寬度是中新提出的一個(gè)單位，通過(guò)寬度來(lái)計(jì)算字體尺寸。 個(gè)人翻譯，轉(zhuǎn)載請(qǐng)注明出處 英文原文：CSS Font Sizing 寫(xiě)在前面 上一篇文章如何做好移動(dòng)端的響應(yīng)式設(shè)計(jì)：Viewport控制討論到了CSS像素，于是我決定研究一下如何用不同的方式來(lái)在CSS中設(shè)定字體...
摘要：一允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整首先，在網(wǎng)頁(yè)代碼的頭部，加入一行標(biāo)簽。四選擇加載自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的核心，就是引入的模塊。參考自自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)基于等視區(qū)相對(duì)單位的響應(yīng)式排版和布局 一、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整 首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport標(biāo)簽?！ ? viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始...
摘要：一允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整首先，在網(wǎng)頁(yè)代碼的頭部，加入一行標(biāo)簽。四選擇加載自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的核心，就是引入的模塊。參考自自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)基于等視區(qū)相對(duì)單位的響應(yīng)式排版和布局 一、允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整 首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport標(biāo)簽。 viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始...
閱讀 3134·2021-09-28 09:42
閱讀 3464·2021-09-22 15:21
閱讀 1136·2021-07-29 13:50
閱讀 3589·2019-08-30 15:56
閱讀 3378·2019-08-30 15:54
閱讀 1205·2019-08-30 13:12
閱讀 1188·2019-08-29 17:03
閱讀 1210·2019-08-29 10:59
