iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

30天搞定CSS及切版系列 第 4

尺寸單位 px、em、rem

  • 分享至 

  • twitterImage
  •  

前言

在現實生活中,常見的尺寸單位有公分(cm)、公尺(m)、奈米(nm),
而在網頁畫面中自己的尺寸單位~
用來改變文字大小、元素寬高等等...

px (pixel)

屬絕對數值。

em

屬相對數值。
公式 : 父元素 Font Size * em 數值 = 最終數值。
例:

父元素 : font-size :15px;
子元素 : font-size : 2em; 

最後算出來的結果子元素font-size大小 = 15px * 2 = 30px;

rem

屬相對數值。
公式 : 根元素 font-size * rem數值 = 最終數值。

根元素指沒有父元素的元素。通常為

根元素 : font-size :12px;
子元素 : font-size : 3rem; 

最後算出來的結果子元素font-size大小 = 12px * 3 = 36px;


上一篇
偽元素(pseudo element)、偽類別(pseudo element)
下一篇
CSS 權重優先級
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言