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

2024-03-19 22:13:34

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>

为什么有人认为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>

如果在根元素上使用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>

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

码农公寓

相关文章