1. 默写盒模型的全部属性,并准确说出他们的应用场景
盒模型的属性有：width、height、padding、border、margin
width 内容的宽度
height 内容的高度
padding 内边距，边框到内容的距离
border 边框
margin 外边距，盒子边框到附近最近盒子的距离
2.`box-sizing`: 解决了什么问题, 不用它应该如何处理
border-sizing（是CSS3里的属性）解决了边框和填充被计算到盒模型内，不会破坏布局。
盒子大小计算原理
w3c标准盒子 = 内容块的大小+边框+填充（相加各种大小得到总体的宽高）
传统IE6盒子 = 整体宽高（内容大小、填充、边框）（从整体减去内在元素大小）
如果不用box-sizing，应该从width和height减去padding或border。
3.盒子外边距之的合并是怎么回事,并实例演示
同级盒子之间，添加外边距后，出现了外边距的合并，也叫外边距的塌陷。
二个盒子之间的间距，最终由比较大的值确定。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距之的合并，塌陷现象</title>
<style>
.top{
width: 200px;
height: 200px;
background-color:blue;
margin-bottom: 20px;
}
.nav{
width: 200px;
height: 200px;
background-color:green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="nav"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子外边距会传递，内层传递到外层。给嵌套盒子（子盒子）加向上的外边距时,父盒子会跟着掉下来，即：外边距塌陷。
处理的方法是：1,给父元素添加上边框border-top: 1px solid red;
处理的方法是：2、给父元素加overflow:hidden 属性
处理的方法是：3,给父元素添加上内边距padding
5.实例演示: 背景颜色的线性渐变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景颜色的线性渐变的</title>
<style type="text/css">
body{
background-color: black;
}
.content{
width: 800px;
height: 200px;
margin: 20px auto;
background-image: linear-gradient(to right,red,orange,green,cyan,blue,purple);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
6.实例演示: 背景图片的大小与位置的设定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示: 背景图片的大小与位置的设定</title>
<style type="text/css">
.content{
width: 600px;
height: 600px;
border: 6px solid blue;
margin: 20px auto;
background-image: url("static/images/zhuting.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
