![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：做提不错, 努力
Collection
Collection
1: 默写盒模型的全部属性,并准确说出他们的应用场景
content(width,height)内容
border边框
margin外边距
padding内边距
background背景
2：`box-sizing`: 解决了什么问题, 不用它应该如何处理
box-sizing可以清除内边距和边框对于盒子大小的影响。如果不用可以使用总宽度=内边距+内容+边框为盒子宽度
3：盒子外边距之的合并是怎么回事,并实例演示
盒子外边距合并是，当一个盒子的下边距和同级盒子的上边距都有值得时候，将会取值比较大的准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距之的合并是怎么回事,并实例演示 </title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: lawngreen;
}
.box2{
width: 150px;
height: 150px;
background-color: lightsalmon;
}
.box1{
margin-bottom: 30px;
}
.box2{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4： 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子之间盒子边距处理。给子盒子添加外边距时，外边距将直接叠加在父盒子上。如果要给子盒子设置外边距。则可使用父盒子的内边距来实现。
5： 实例演示: 背景颜色的线性渐变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景颜色的线性渐变的</title>
<style>
.box1{
width: 400px;
height: 300px;
background:linear-gradient(green,yellow,white);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6：实例演示: 背景图片的大小与位置的设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这例演示: 背景图片的大小与位置的设定</title>
<style>
.box1{
width: 600px;
height: 600px;
/*默认重复平铺*/
/*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg");*/
/*不平铺*/
background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") no-repeat;
/*横向平铺*/
/*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-x;*/
/*纵向平铺*/
/*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") repeat-y;*/
/*纵向平铺*/
/*background: url("https://img.php.cn/upload/avatar/000/082/543/5dba8cfda79e7484.jpg") 50% 50%;*/
/*水平垂直居中*/
/*background-position: 50% 50%;*/
/*等比例缩放*/
/*background-size: cover;*/
/*完全填充，有可能显示不全，*/
/*background-size: contain;*/
background-color: lavender;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
