Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:这二者的区别, 有时还真傻傻不好分, 因为好多场景下表现形式是一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型属性简写与em和rem区别</title>
</head>
<style>
header {
border: 1px solid red;
background-color: burlywood;
font: bolder 2em 微软雅黑;
padding: 0.5em 1em 0.5em 1em;
margin: 2em 3em 2em 3em;
border-radius: 1em; /*此时1em为32px*/
}
footer {
border: 1px solid red;
background-color: burlywood;
font: bolder 2em 微软雅黑;
padding: 0.5em 1em 0.5em 1em;
margin: 2em 3em 2em 3em;
border-radius: 1rem; /*此时1rem为16px*/
}
</style>
<body>
<header>努力学习php中。。。</header>
<footer>努力学习php中。。。</footer>
</body>
</html>
效果图: