1. 默写盒模型的全部属性,并准确说出他们的应用场景
(1). margin：外边距，设置盒子的外边距，如上margin-top、右margin-right、下margin-bottom、左margin-left；
border：边框，设置盒子的宽度，如上border-top、右border-right、下border-bottom、左border-left；
padding：内边距，设置盒子的内边距，如上padding-top、右padding-right、下padding-bottom、左padding-left；
content：内容区域；
(2). 盒模型的两种标准：标准模型、IE模型；（两种模型的差异在于元素宽高度的定义）
标准模型的 元素宽高 ＝ content 的宽高 ；
IE模型的 元素宽高 ＝ content＋padding + border 的总宽高 。
2. box-sizing: 解决了什么问题, 不用它应该如何处理
(1). box-sizing: border-box 清除了边框、内边距对盒子大小的影响；
(2). 不用它，当盒子设置了边框、内边距宽高，若想使盒子保持原有大小，须将盒子宽(高)设成 = 原盒子宽(高) - 边框宽(高) - 内边距宽(高) 。
3. 盒子外边距之的合并是怎么回事,并实例演示
如两同级盒子，一在上，其margin-bottom为10px，另一在下，其margin-top为30px，那么这两盒子的上下间距为：两者较大值30px，而不是它们的和值10+30px，这就是盒子外边距的合并；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的合并</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: lightseagreen;
margin-bottom: 10px;
}
.box2 {
width: 200px;
height: 100px;
background-color: lightcoral;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
ps：如上图，第一张是效果图； 第二张图是box1的margin-bottom，第三张图是box2的margin-top；
4. 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
(1). 若子盒子设置外边距，会传递到父盒子；
(2). 可通过设置父盒子的内边距或边框解决。
5. 实例演示: 背景颜色的线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色的线性渐变</title>
<style>
.box {
width: 200px;
height: 200px;
background: linear-gradient(to right,lightskyblue, lightsalmon);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
6. 实例演示: 背景图片的大小与位置的设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片的大小与位置的设定</title>
<style>
/*background-image: url(): 设置背景图片*/
/*background-position: 设置背景图片显示位置*/
/*background-size: 设置背景图片显示大小*/
/*background-repeat: 设置背景图片是否重复*/
.box {
box-sizing: border-box;
width: 250px;
height: 250px;
border: 1px solid lightblue;
background-color: lightgoldenrodyellow;
background-image: url("static/images/cat.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
7. 总结： CSS盒模型使我们的网页布局更方便高效。
