一、px为具体的长度单位,表示一个像素点,是一个绝对尺寸
二、em、rem都是倍数的意思,其尺寸是相对的
1.em相对于父级的font-size的倍数
2.rem相对于根元素,即html的font-size的倍数
例如下列示例中,p1的宽就是300px,p2的宽就是400px
<!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: 200px;
}
div{
font-size: 100px;
}
.p1{
width: 3em;
background-color: coral;
}
.p2{
width: 2rem;
background-color: crimson;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
</div>
</body>
</html>