em字型大小參考物件

admin發表於2019-08-29
物件

em是一個相當重要的尺寸單位，學習難度比px稍稍大一點。

當然em也是非常簡單的，只是比px難度稍大一些，因為px更為直接一點。

看如下程式碼例項：

[CSS] 純文字檢視 複製程式碼
div{
  border-width:1em;
}

上述程式碼設定div的邊框粗細是1em。

此時邊框的寬度的粗細可能是12px，也可能是16px，也肯恩是其他值。

因為em是一個相對單位，它是相對於當前元素的字型大小，特別強調一下是當前元素字型大小。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  font-size:12px;
  width:100px;
  height:100px;
  border:12px solid red;
}
div > p{
  font-size:16px;
  width:50px;
  height:50px;
  border:1em solid blue;
  margin:0px auto;
}
</style>  
</head>
<body>
<div>
  <p></p>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/150722ciad9bii1o0dtbao.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

em是相對單位，相對於當前元素的字型大小。

假設當前元素的字型大小是12px，那麼1em等於12px，如果字型大小為16px，1em等於16px。

一定要記住，不是相對於父元素的字型大小，上述程式碼中的藍色邊框是16px要大於父元素的12px的邊框。

基於父元素：
前面強調過，em是基於當前字型大小，而不是基於父元素字型大小。

但是也有一種例外，也就是字型大小本身使用em作為單位，那麼此時em是相對於父元素字型大小的。

[CSS] 純文字檢視 複製程式碼
div{
  font-size:1em;
}

此時em是基於div的直接父元素字型大小的，因為當前元素字型大小尚屬於未知。

相關文章