一、em 是一个相对长度单位，参照的是当前元素的字号的px长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长度单位</title>
<style>
html {
font-size: 16px;
}
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
font-size: 62.5%;
/*10 / 16 = 0.625*/
}
/*em 是一个相对长度单位，参照的是当前元素的字号的px长度*/
.box {
font-size: 16px;
}
span {
display: block;
width: 20em;
height: 20em;
background: pink;
font-size: 12px;
}
/*span的宽和高是span标签字体大小的20倍，(12*20)px*/
</style>
</head>
<body>
<div class="box">
<span>有一些文字</span>
</div>
</body>
</html>
二、rem也是一个相对的长度单位，参照的是html根元素的字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长度单位</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
}
/*rem也是一个相对的长度单位，参照的是html根元素的字号*/
/*rem使用比较灵活*/
.box {
width: 10rem;
height: 10rem;
background-color: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
有一些文字
</div>
</body>
</html>
