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

2021-05-16 12:34:00 阅读：201 来源： 互联网

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的大小

标签：em,字体大小,px,元素,1em,rem,font,size
来源： https://www.cnblogs.com/wanqiblog/p/14773574.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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