css em單位用法介紹

admin發表於2017-03-04
CSS

em是相對尺寸單位，既然是相對單位長度，那麼就會有個參考物件才行。

網上有很多相關的教材，但是感覺介紹複雜了，進行換算，其實都沒有涉及到它的核心重點，下面介紹一下此單位為何物。

em是相對於當前元素字型大小的一個單位，例如當前元素的字型大小事12px，那麼1em=12px，原理就是如此。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  width:300px;
  height:300px;
  background:green;
  font-size:12px;
}
#box .demo{
  width:100px;
  height:100px;
  background:red;
  margin:0px auto;
  text-align:center;
  line-height:100px;
  font-size:2em;
}
</style>
</head>
<body>
<div id="box">
  <div class="demo">螞蟻部落</div>
</div>
</body>
</html>

相關文章