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>
为什么有人认为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>
<!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>
标签：em,字体大小,px,元素,1em,rem,font,size 来源： https://www.cnblogs.com/wanqiblog/p/14773574.html