一，默写盒模型的全部属性,并准确说出他们的应用场景答：
width：用于设置盒子的宽度
height：用于设置盒子的高度
background：用于设置盒子的背景
border：用于设置盒子的边框
padding：控制盒子的内边距，可以控制嵌套内容距离盒子边缘的距离
margin：控制盒子的外边距
二，`box-sizing`: 解决了什么问题,不用它应该如何处理答：
box-sizing解决了内边距与边框对盒子大小的影响。
不用box-sizing应该手动设置内边距与边框大小，并且总宽度=左右内边距+左右边框+内容宽度。总高度=上下内边距+上下边框+内容高度
三，盒子外边距之的合并是怎么回事,并实例演示答：
同级盒子之间,添加外边距后,出现了外边距的合并, 也叫外边距的塌陷，二个盒子之间的间距, 最终由以较大值确定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style>
div{
box-sizing: border-box;
}
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box1{
margin-bottom: 20px;
}
/*20+20=20*/
.box2{
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码效果
![P0]N((MK1%[0Q)PHCM)PU1E.png](https://img.php.cn/upload/image/903/762/795/1572605118597837.png "1572605118597837.png")
四，嵌套盒子之间内边距与外边距的表现有何不同, 如何处理答：
父盒子嵌套一个子盒子，给子盒子设定margin-top:10px，预想的子盒子上边距父盒子10px，事实上是父盒子仍然紧贴子盒子，整个父盒子上边框距离浏览器上边增加了10px 的外边距，是因为发生了外边距的传递效应，外边距会由内向外进行传递。
给父盒子设定padding-top：10px，其实际效果变为父盒子上边距子盒子10px。
五，实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色的线性渐变</title>
<style>
.box{
box-sizing: border-box;
width: 450px;
height: 500px;
border: 1px solid gray;
}
.box{
background-color: lightblue;
}
.box{
background: linear-gradient(red,green,blue,white);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码效果
![UZC}N{A(N15PA~[QI5BA]AK.png](https://img.php.cn/upload/image/997/656/922/1572605144974625.png "1572605144974625.png")
六，实例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片的大小与位置的设定</title>
<style>
.box{
box-sizing: border-box;
width: 450px;
height: 500px;
border: 1px solid gray;
}
.box{
background-color: lightblue;
}
.box{
background-image: url("234.jpg");
background-repeat: no-repeat;
background-position:center center ;
/*background-size: cover;*/
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码效果
