1、默写盒模型的全部属性，并准确说出他们的应用场景
盒模型的属性：
宽度：width；用来设置盒子的宽度
高:height；用来设置盒子的高度
背景:background；用来设置盒子的背景
内边距：padding；让内容和边框中间有间隙
边框:border；用来突出盒子的大小，可以设置边框线的粗细或边框类型（如虚线边框或实线边框）
外边框:margin；存在多个盒子时，外边框用来间隔开盒子与盒子间的距离，如果只有一个盒子，外边距将没有意义。
盒子从内到外的布局为：盒子的宽和高撑起的内容框 《 padding盒子的内边距《 border盒子的边框《 margin盒子的外边框
宽、高、内边距和边框会影响盒子大小，外边距影响盒子与盒子之间的距离。
2、’box-sizing’:解决了什么问题，不用它应该如何处理
box-sizing解决了内边框和边框的大小影响盒子大小的问题，设置盒子的宽和高时先设置box-sizing:border-box;可以让盒子的大小自动适应最初设置的盒子宽和高；没有box-sizing,设置了盒子的宽和高（大小）后，如果后来又修改或添加盒子的（内）边框，为了让盒子整个大小不超过盒子设置的大小，需要不断地去调整盒子的大小。
3、盒子外边距的合并是怎么回事，并实例演示
盒子外边距的合并：当相邻的两个盒子在设置相邻面的外边距时，两个盒子的外边距会合并，最终相隔的距离，为设置较大外边框盒子设置的大小，彼此间的距离为合并的关系，非相加的关系。
实例演示：代码
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>盒子外边距的合并</title><link rel="stylesheet" href="css1031/style1.css"</head><body><div class="box1"></div><div class="box2"></div></body></html>
css:
div{box-sizing: border-box;}.box1{width: 200px;height:200px;background-color: hotpink;}.box2{width: 300px;height:300px;background-color: khaki;}.box1{margin-bottom: 20px;}.box2{margin-top: 30px;}
4、嵌套盒子之间内边距与外边距的表现有何不同，如何处理
嵌套盒子之间的外边距会由内向外传递，子盒子外边距会传递到父盒子,通过给父盒子添加内边距或边框来解决；
给子盒子添加外边距两个盒子的间隙不变，如果想要实现子盒子与父盒子之间存在间隙，通过给父盒子添加内边距来实现。
5、实例演示：背景颜色的线性渐变
代码：
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景颜色的线性渐变</title><link rel="stylesheet" href="css1031/style2.css"></head><body><div class="box"></div></body></html>
css:
.box{box-sizing: border-box;width: 300px;height:350px;border: 1px solid black;}.box{background-color: hotpink;}.box{background-clip: padding-box;}.box{background:linear-gradient(hotpink,white);/*线性渐变：从红到白；方向默认：从上到下*/background: linear-gradient(to right,blue, lightblue);background: linear-gradient(to right bottom,blue,lightblue);/*从右下角渐变*/background: linear-gradient(30deg,blue,lightblue);/*30度角渐变*/background:linear-gradient(purple,lightblue,hotpink,white);/*连续渐变*/}
6、实例演示：背景图片的大小与位置的设定
代码：
HTML：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景图片的大小与位置的设定</title><link rel="stylesheet" href="css1031/style3.css"></head><body><div class="box"></div></body></html>
css:
.box{background-image: url("flower.jpg");}.box{width: 1000px;height: 1000px;border: 1px solid darkgray;}/*.box{background-repeat: no-repeat;}.box{background-position: center center;/*水平垂直居中*/background-size: cover;}*//*简写*/.box{background: cyan url("flower.jpg") no-repeat center center;}