px和em和rem区别
1.px像素单位 相对于屏幕宽高度而言
2.em相对长度单位 相对于当前元素的字体大小而言的 ,默认1em=16px
3.rem相对长度单位 默认1rem=16px 相当于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>
<!-- px和em和rem区别 -->
<!-- 1.px像素单位 相对于屏幕宽高度而言 -->
<!-- 2.em相对长度单位 相对于当前元素的字体大小而言的
默认1em=16px
-->
<!-- 3.rem相对长度单位 默认1rem=16px 相当于html元素的字体大小而言的 -->
<style>
html{
font-size: 40px;
}
div{
/* 1.em */
font-size: 28px;
/* 文字到边框的距离 */
/* padding: 1em; */
/* 2.rem */
padding: 1rem;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>