對CSS尺寸單位em的長期誤解
編輯：CSS特效代碼
一直以來認為'em'是相對於父元素的字體大小.
直到今天學習移動WEB開發,重新復習css的尺寸大小時,驚奇發現:對em深深的誤解了!!!
在CSS官網對em的解釋實例是: a. h1{line-height:1.2em;} →使用的行高為h1自身的font-size*1.2; b.h1{font-size:1.2em;}→h1的font-size為h1繼承來的font-size*1.2;下面我們通過具體例子來驗證一下.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
p{
width: 20em; //20*繼承父元素的fontSize;(圖1)
}
p{
width: 20em;
font-size:15px;//此時的寬度為20*15;(圖二)
}
</style>
<body>
<p>我是用em定義的字體大小</p>
</body>
</html>
圖一:
圖二:
綜上:'em'就是自身的字體大小即:fontSize.如果自身指定的fontSize=20px;那麼1em =20px;如果自身沒有指定,則是繼承來的fontSize.
小編推薦
熱門推薦