css中单位px,em, rem的区别

1.px是相对长度单位,它是相对于显示器屏幕分辨率而言的 优缺点:比较稳定和精确,但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况   2.em是相对长度单位,1em等于当前元素的字体大小,除非你在设置font-size   3.rem是CSS3新增的一个相对单位,rem是相对单位,是相对HTML根元素,当在根元素中使用rem设置font-size时,此时的1rem等于浏览器默认字体大小,大多数浏览器默认大小为16px   下面重点讲讲em,因为这个单位在使用上有一些坑点,大多数资料说1em是等于父元素的字体大小,经测试,这种说法不准确   如下所示,经浏览器计算,padding-top并不是 2 * 24 = 48px,而是相对于其本身元素而言的,也就是2 * 36 = 72px
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      font-size: 24px;
    }
    .text {
      font-size: 36px;
      padding-top: 2em;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="text">哈哈哈哈</div>
  </div>
</body>
</html>

css中单位px,em, rem的区别

 

 

为什么有人认为em是相对于父元素字体的大小呢,这是因为设置当前元素的font-size时采用em单位才会出现的特例。如下所示,因为1em是相对当前元素的font-size的大小,而我们现在要设置的就是font-size,因此此时font-sizej就是默认值inherit,也就是从父元素继承过来的字体大小,所以此时1em看起来就像是相对于父元素字体大小。除此之外,1em都是相当于当前元素font-size的字体大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      font-size: 24px;
    }
    .text {
      font-size: 2em;   //经计算为48px
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="text">哈哈哈哈</div>
  </div>
</body>
</html>

 css中单位px,em, rem的区别

  如果在根元素上使用em设置font-size会怎么样?因为根元素已经没有父元素了。在根元素上的默认值为initial,而大多数浏览器的默认字体大小为16px,因此设置根元素上font-size时使用的1em = 16px.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="text">哈哈哈哈</div>
  </div>
</body>
</html>

 css中单位px,em, rem的区别

总结 除了设置font-size时1em 等于父元素font-size的大小,其他情况1em都是等于当前元素的font-size的大小

上一篇:使用相对长度单位em布局网页内容


下一篇:Iconfont