1，默写盒模型的全部属性,并准确说出他们的应用场景
width：宽度，设置盒子宽度
height：高度，设置盒子高度
background：背景，设置盒子背景；设置盒子的背景，image：背景图片，position：位置，size：大小
padding：内边距，设置盒子内边距；设置盒子的内边距 top-right-bottom-left
margin：外边距，设置盒子外边距；设置盒子的外边距 top-right-bottom-left
border：边框，设置盒子宽度
2，box-sizing: 解决了什么问题, 不用它应该如何处理
box-sizing：解决了内边距与边框对盒子大小的影响
不使用box-sizing时，应用盒子的宽度（width）和高度（height）减去内边距（padding）及边框（border）
width = box.width - padding*2-border*2
height = box.height- padding*2-border*2
3，盒子外边距之的合并是怎么回事,并实例演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型外边距塌陷</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color:green;
margin-top: 60px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4，嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
子盒子外边距会传递到父盒子,通过给父盒子添加内边距或边框来解决
5，实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tittle</title>
</head>
<style>
.box1{
width: 200px;
height: 200px;
background:linear-gradient(to top,green,white);
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background: linear-gradient( to left,green,red);
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5，这例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tittle</title>
<style>
.box1{
width: 800px;
height: 800px;
box-sizing: border-box;
border: 10px dotted blueviolet;
background: url("https://www.php.cn/static/images/index_banner.png") no-repeat 50%;
background-size: 150px 80px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
