代碼片段 2.1：在padding上使用em

.padded {
  font-size: 16px;
  padding: 1em;          1
}

1 把各個(gè)方向的padding的值設(shè)置為字號(hào)大小

把padding賦值為1em，乘以字號(hào)，得到一個(gè)值為16px的padding渲染值。重點(diǎn)來(lái)了，使用相對(duì)單位聲明的值會(huì)由瀏覽器轉(zhuǎn)化為一個(gè)絕對(duì)值，我們稱之為計(jì)算值。

在這個(gè)例子里，將padding改為2em會(huì)生成一個(gè)32px的計(jì)算值。如果同一個(gè)元素的另一個(gè)選擇器，用一個(gè)不一樣的字號(hào)值去覆蓋它，這會(huì)改變em在這個(gè)域下的基準(zhǔn)值，那么padding的計(jì)算值也會(huì)相應(yīng)變化。

在設(shè)置padding、height、width或border-radius等屬性時(shí)，使用em可能會(huì)很方便，因?yàn)槿绻鼈兝^承了不同的字號(hào)大小，或者用戶更改了字體設(shè)置，這些屬性會(huì)均勻地縮放。

圖2.2展示了兩個(gè)不同大小的盒子。盒子內(nèi)的font-size、padding和border-radius各不相同。

[ 圖 2.2：有相對(duì)大小的padding和border-radius的元素 ]

你可以通過(guò)用em聲明padding和border-radius來(lái)給這些盒子聲明樣式規(guī)則。首先給每個(gè)元素設(shè)定padding和border-radius為1em，然后給每個(gè)盒子指定不同的字號(hào)，那么其他屬性會(huì)跟著字號(hào)縮放。

在你的HTML代碼里，創(chuàng)建如下的兩個(gè)盒子，類名分別是box-small和box-large，代表兩個(gè)字號(hào)修飾符。

[ 代碼片段 2.2：在不同元素上使用em（HTML）]

Small
Large

現(xiàn)在，添加下面的樣式到你的樣式表。這里使用了em聲明了一個(gè)盒子。還定義了小字號(hào)和大字號(hào)的修飾符，指定不同的字號(hào)大小。

[ 代碼片段 2.3：在不同元素上使用em（CSS）]

.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}

.box-small {
  font-size: 12px;              1
}

.box-large {
  font-size: 18px;              1
}

1 不同的字號(hào)大小，這會(huì)改變?cè)氐膃m實(shí)際值的大小。

這是em一個(gè)強(qiáng)大的功能。你可以定義一個(gè)元素的字號(hào)大小，然后使用一句簡(jiǎn)單的聲明，就可以通過(guò)改變字號(hào)大小從而控制整個(gè)元素大小縮放。你后面將會(huì)創(chuàng)建另外一個(gè)這樣的例子，不過(guò)首先，我們來(lái)討論一下em和字號(hào)大小。

當(dāng)font-size使用em作為單位時(shí)，它的表現(xiàn)會(huì)有點(diǎn)不一樣。我之前說(shuō)過(guò)，em是以當(dāng)前元素的字號(hào)大小作為基準(zhǔn)值的。但是，如果你把一個(gè)元素的字號(hào)設(shè)為1.2em的時(shí)候，這是什么意思呢？一個(gè)元素的字號(hào)大小是不能等于它自己的1.2倍的。相反，在font-size上的em會(huì)先從繼承到的字號(hào)大小衍生出來(lái)。

舉個(gè)簡(jiǎn)單的例子，見(jiàn)圖2.3。以下展示了一些不同字號(hào)大小的文字。在代碼片段2.4，你會(huì)用到em來(lái)實(shí)現(xiàn)。

[ 圖 2.3 以em為單位的兩種不同的字號(hào)大小 ]

在你的頁(yè)面添加以下代碼片段。第一行文字，在標(biāo)簽里面，它會(huì)按body的字號(hào)大小渲染。第二部分，口號(hào)（slogan），繼承父元素的字號(hào)大小。

[ 代碼片段 2.4 相對(duì)font-size的模板 ]

  We love coffee
  
We love coffee
          1

1 slogan從繼承了字號(hào)大小。

代碼片段中，CSS代碼片段聲明了body的字號(hào)大小。為了更加清晰，在這里我用了px來(lái)聲明。下一步，你可以用em來(lái)放大slogan的字號(hào)大小。

[ 代碼片段 2.5：在font-size上使用em ]

body {
  font-size: 16px;
}

.slogan {                  1
  font-size: 1.2em;        1
}                          1

1 計(jì)算：這個(gè)元素繼承到字號(hào)，乘以1.2

slogan聲明的字號(hào)大小是1.2em，為了計(jì)算轉(zhuǎn)換成像素值，你需要引用繼承的字號(hào)16px，16 * 1.2 = 19.2，所以計(jì)算字號(hào)值是19.2px。

提示 
如果你已經(jīng)知道以px為單位的基礎(chǔ)字號(hào)大小，但希望把它改用em聲明，下面有個(gè)簡(jiǎn)單的計(jì)算公式：目標(biāo)em值 = 目標(biāo)像素值 / 父元素（被繼承元素）像素值。舉個(gè)例子，如果你想要一個(gè)10px的字號(hào)大小，父元素的字號(hào)是12px，10 / 12 = 0.8333em。如果你想要16px的字號(hào)大小，父元素字號(hào)是12px，那么 16 / 12 = 1.3333em。我們會(huì)在這章里多次用到這個(gè)計(jì)算公式。

有一點(diǎn)對(duì)你很有幫助，對(duì)于大多數(shù)瀏覽器，默認(rèn)字號(hào)大小是16px。技術(shù)上，關(guān)鍵字medium會(huì)被計(jì)算轉(zhuǎn)換為16px。

你已經(jīng)使用過(guò)em聲明font-size了（基于一個(gè)繼承的字號(hào)大小值）。以及，你也曾經(jīng)使用em聲明其他屬性，如padding和border-radius（基于當(dāng)前元素的字號(hào)大小值）。當(dāng)你針對(duì)同一個(gè)元素使用em聲明font-size和其他屬性的時(shí)候，em會(huì)變得很神奇。此時(shí)瀏覽器必須先計(jì)算font-size，然后基于這個(gè)值再去計(jì)算其他值。這些屬性聲明的時(shí)候使用的是相同的em值，但很可能它們會(huì)有不同的計(jì)算值。

在之前的例子里，我們計(jì)算到字號(hào)大小是19.2px（繼承的16px乘以1.2em）。圖2.4是相同的slogan元素，但有額外的1.2em padding以及為了讓padding大小更加明顯的灰色背景。可以看出，padding比font-size稍微大一些，盡管它倆聲明的時(shí)候em值是一樣的。

[ 圖2.4 一個(gè)font-size為1.2em以及padding為1.2em的元素 ]

現(xiàn)在的情況是，這個(gè)段落從body繼承了16px的字號(hào)大小，通過(guò)計(jì)算得到值為19.2px的字號(hào)計(jì)算值。這意味著，19.2px是1em在當(dāng)前域的基礎(chǔ)值，而這個(gè)值會(huì)被用作計(jì)算padding的值。對(duì)應(yīng)的CSS代碼在下面，更新你的樣式表并查看你的測(cè)試頁(yè)面吧。

[ 代碼片段 2.6 在font-size和padding上使用em ]

body {
  font-size: 16px;
}

.slogan {
  font-size: 1.2em;             1
  padding: 1.2em;               2
  background-color: #ccc;
}

1 賦值為 19.2 px

2 賦值為 23.04 px

在這個(gè)例子里，padding的聲明值為1.2em，乘以19.2px（當(dāng)前元素的字號(hào)大?。?，計(jì)算出23.04px。我們可以看到，盡管font-size和padding聲明時(shí)em值是一樣的，但它們的計(jì)算值是不一樣的。

當(dāng)你使用em聲明多層嵌套的元素字號(hào)時(shí)，會(huì)產(chǎn)生意想不到的效果。要弄清楚每個(gè)元素的實(shí)際值，首先你需要知道它繼承的父元素的字號(hào)大小，如果父元素的字號(hào)也是用em聲明的，那么你需要知道它的父元素的字號(hào)大小，在dom樹(shù)往上查，以此類推。

當(dāng)你使用em聲明列表的字號(hào)大小，列表嵌套了好幾層，效果就更明顯了。大多數(shù)web開(kāi)發(fā)者會(huì)發(fā)現(xiàn)在他們的職業(yè)生涯里面，圖2.5的列表嵌套形式有點(diǎn)眼熟。文字在逐步縮小！正是因?yàn)閑m帶來(lái)的這一類煩人的問(wèn)題，開(kāi)發(fā)者才對(duì)em避而遠(yuǎn)之。

[ 圖 2.5 嵌套列表中的字號(hào)縮小現(xiàn)象 ]

當(dāng)你多層嵌套列表，而每一層聲明的字號(hào)大小以em為單位，字號(hào)收縮現(xiàn)象就會(huì)發(fā)生。在代碼片段2.7和2.8的例子里，無(wú)序列表的字號(hào)是0.8em。這個(gè)選擇器對(duì)頁(yè)面上所有的ul有效，所以當(dāng)一個(gè)列表從另外一個(gè)列表繼承到字號(hào)大小的時(shí)候，em就產(chǎn)生復(fù)合效果。

[ 代碼片段 2.7 在列表上使用em ]

body {
  font-size: 16px;
}

ul {
  font-size: .8em;
}

[ 代碼片段 2.8 多層嵌套的列表 ]

  
Top level
    
                                    1
      
Second level                      1
        
                                2
          
Third level                   2
            
                            3
              
Fourth level              3
                

                  
Fifth level
                
              
            
          
        
      
    
  

1 這個(gè)列表嵌套在第一個(gè)列表里，繼承了它的字號(hào)大小

2 然后這個(gè)列表又嵌套在另一個(gè)列表里，繼承了第二個(gè)列表的字號(hào)大小

3 ……以此類推

每一個(gè)列表的字號(hào)大小是0.8乘以父元素的字號(hào)大小。這代表第一個(gè)列表的字號(hào)大小是12.8px，嵌套的子列表字號(hào)大小是10.24px（12.8px * 0.8），第三層列表的是8.192px，如此類推。同樣地，如果你給字號(hào)大小的賦值大于1em，相反，文字的字號(hào)會(huì)一層層變大。我們想要的效果是像圖2.6一樣，在頂層聲明字號(hào)的大小，但下面嵌套層級(jí)的列表字號(hào)保持不變。

[ 圖 2.6 字號(hào)正常的多層嵌套列表 ]

其中一種實(shí)現(xiàn)的方式可以看看代碼片段2.9。第一個(gè)列表的字號(hào)大小還是0.8 em（見(jiàn)示例2.7），第二個(gè)選擇器對(duì)嵌套在無(wú)序列表的無(wú)序列表有效 —— 也就是除了第一個(gè)無(wú)序列表以外的所有無(wú)序列表。現(xiàn)在嵌套的列表設(shè)定了跟父元素一致的字號(hào)大小，正如圖2.6一樣。

[ 代碼片段 2.9 字號(hào)收縮現(xiàn)象的糾正 ]

ul {
  font-size: .8em;
}

ul ul {                1
  font-size: 1em;      1
}  

1 嵌套在列表里面的列表，應(yīng)該把字號(hào)大小設(shè)定為跟父元素一樣

這可以解決問(wèn)題，但不是最優(yōu)方案。因?yàn)槟阍O(shè)置了一個(gè)字號(hào)值，馬上用另一個(gè)選擇器重寫了這個(gè)規(guī)則。如果你可以使用針對(duì)嵌套的列表聲明一個(gè)特定的選擇器，避免互相覆蓋，會(huì)是一個(gè)更好的方案。

到現(xiàn)在我們清楚了，如果你不是一個(gè)比較小心的人，你應(yīng)該遠(yuǎn)離em。使用em作為padding、margin和元素縮放效果的單位挺好的，但當(dāng)em遇上font-size時(shí)，事情可以變得很復(fù)雜。感謝上天，我們有個(gè)更好的選擇 —— rem。

（未完待續(xù)，請(qǐng)期待下一篇《如何更愉快地使用rem》）

《別說(shuō)你懂CSS相對(duì)單位》系列譯文：

如何更愉快地使用em [本文]

如何更愉快地使用rem

視口相關(guān)單位的應(yīng)用

無(wú)單位數(shù)字和行高

CSS自定義屬性

章節(jié)：

2.1 相對(duì)單位值的魔力

2.1.1 完美像素設(shè)計(jì)（pixel-perfect design）的掙扎

2.1.2 完美像素網(wǎng)頁(yè)的終結(jié)

像素（pixel）、點(diǎn)（point）和pc（pica）

2.2 em和rem

2.2.1 對(duì)font-size使用em

當(dāng)我們?cè)谝粋€(gè)元素內(nèi)用em同時(shí)聲明font-size和其他屬性

字號(hào)收縮問(wèn)題

2.2.2 對(duì)font-size使用rem

可用性：對(duì)font-size使用相對(duì)長(zhǎng)度單位

2.3 停止使用像素思維去思考

2.3.1 設(shè)置一個(gè)合理的字號(hào)默認(rèn)值

2.3.3 讓這個(gè)面板變得“響應(yīng)式”

2.3.3 調(diào)整單個(gè)組件的大小

2.4 視口相關(guān)單位（viewport-relative units）

CSS3

2.4.1 在font-size上使用vw

2.4.2 在font-size上使用calc()

2.5 不帶單位的數(shù)字（unitless number）和行高（line-height）

2.6 自定義屬性（也叫“CSS變量”）

2.6.1 動(dòng)態(tài)改變自定義屬性的值

2.6.2 通過(guò)JavaScript改變自定義屬性的值

2.6.3 初探自定義屬性

總結(jié)

原著版權(quán)信息：  
?  
作者：Keith J.Grant  
書(shū)籍：CSS in Depth  
章節(jié)：Working with relative units

筆者 @Yuying Wu，前端愛(ài)好者 / 鼓勵(lì)師 / 新西蘭打工度假 / 鏟屎官。目前就職于某大型電商的B2B前端團(tuán)隊(duì)。

感謝你讀到這里，對(duì)上文若有任何疑問(wèn)或建議，歡迎留言。

如果你和我一樣喜歡前端，喜歡搗騰獨(dú)立博客或者前沿技術(shù)，或者有什么職業(yè)疑問(wèn)，歡迎關(guān)注我以及各種交流哈。

獨(dú)立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu