<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1011作业</title>
<style>
.box1 {
/ background-color: aqua; /
/ 简写 /
/ background: red; /
/ background-image: url(https://img.php.cn/upload/article/000/000/003/5f5add2bab403839.png); /
/ background-repeat: no-repeat; /
/ 简写 /
background: url(https://img.php.cn/upload/article/000/000/003/5f5add2bab403839.png)
no-repeat;
/ 图片定位左边20px,上边50px /
background-position: 20px 50px;
width: 200px;
height: 200px;
/ 简写 /
border: 1px solid blue;
border-top-width: 15px;
border-top-color: red;
border-top-style: dotted;
}
html {
font-size: 1em;
}
.box1 {
font-size: 1.2em;
}
.box2 {
font-size: 1rem;
}
span {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>1.实例掩饰盒模型属性简写的原则</h1>
<!-- em:是可以自定义的,设置好全局的, -->
<div class="box1">我是box1</div>
<hr />
<!-- rem:我理解的就是1rem是固定的,所有的按照1rem翻倍 -->
<div class="box2">我是box2 <span>里的span</span></div>
</body>
</html>
