![[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.默写盒模型的全部属性,并准确说出他们的应用场景
width：内容的宽度，height: 内容的高度，padding：内边距，边框到内容的距离，border: 边框，就是指的盒子的宽度 margin：外边距，盒子边框到附近最近盒子的距离
2. `box-sizing`: 解决了什么问题, 不用它应该如何处理
`box-sizing`: 解决了内边距与边框对盒子大小的影响问题。不用它应该要把内边距加边框加内容才是盒子的大小。
3.盒子外边距之的合并是怎么回事,并实例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距对盒子位置的影响</title>
<style>
.box1{
width: 150px;
height: 150px;
background-color: lawngreen;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: lightcoral;
margin-bottom: 50px;
}
</style>
</head>
<body>
<!--同级关系: 外边距合并-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距对盒子位置的影响</title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: lawngreen;
padding-top: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: lightcoral;
/*塌陷现象，解决方法：在父级用padding-top*/
/*margin-top: 50px;*/
}
</style>
</head>
<body>
<!--嵌套关系: -->
<!--1. 外边距由内向外传递-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5.实例演示: 背景颜色的线性渐变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
.box{
width: 400px;
height: 500px;
border: 1px solid gray;
/*向右下方渐变,从红到白*/
background: linear-gradient(to right bottom,red,white);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6. 这例演示: 背景图片的大小与位置的设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
.box{
width: 400px;
height: 500px;
border: 1px solid gray;
/*设置背景图片*/
background-image: url("../images/girl.jpg");
/*设置背景不重复*/
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: left center;
/*设置背景图片的大小*/
background-size: cover;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
上述代码和总结中涉及知识点注释总结：
1.盒模型的基本特征
2.内边距与边框对盒子大小的影响
3.外边距对盒子位置的影响
4.背景控制的知识