一、默写盒模型的全部属性,并准确说出他们的应用场景
width：内容的宽度
height: 内容的高度
padding：内边距，就是内边距的意思，它是边框到内容之间的距离
border: 边框，描述盒子的边框，边框有三个要素： 粗细 线性样式 颜色
margin：外边距，盒子边框到附近最近盒子的距离
background：背景色，可以设置颜色和图片作为背景
二、 box-sizing: 解决了什么问题, 不用它应该如何处理
box-sizing:border-box 的作用：允许您以确切的方式定义适应某个区域的具体内容指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
不用它的话，大小相同的盒模型，需要减掉边框的宽高才是内容的宽高。
设定box的width=300px height=300px,边框为10px；那么没有设定box-sizing:border-box 的情况下，box的最终宽高都为300+10+10=320px；
如果要保持box的最终宽高为300px，那么必须要改box的width=280px height=280px,边框为10px；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box{
height: 280px;
width: 280px;
background: #7a3dff;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图：
手抄书：
使用box-sizing:border-box ，无论border是多少px，都不会影响box的最终宽高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box1{
height: 300px;
width: 300px;
background: #7a3dff;
border: 10px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图：
手抄书：
三、盒子外边距之的合并是怎么回事,并实例演示
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距</title>
<style type="text/css">
.box1{
height: 100px;
width: 150px;
background:blue;
margin-bottom: 20px;
}
.box2{
height: 150px;
width: 200px;
background: chocolate;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图：
手抄书：
解决办法：
方法1：给下面的盒子设置定位（position：absolute；）即可。
方法2：给下面的盒子设置浮动（float：left；）即可。
方法3：将其中任一个盒子设置为行内块元素（dispaly：inline-block；）即可。
四、 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子之间内边距与外边距的表现有何不同</title>
<style type="text/css">
.box1{
height:400px;
width:500px;
background: green;
margin-top:50px;
}
.box2{
height:200px;
width:300px;
background: darkgrey;
margin-top:20px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图：
手抄书：
五、实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
.box1{
height:200px;
width:200px;
background: linear-gradient(top, white, blue);/*渐变从上到下*/
}
.box2{
height:200px;
width:200px;
background: linear-gradient(top right, white, red);/*渐变从右上角到左下角*/
}
.box3 {
width: 200px;
height: 200px;
background: linear-gradient(left, red, yellow, lime, aqua, blue);/*横向线性渐变*/
}
.box4{
width: 200px;
height: 200px;
background: radial-gradient(circle, white, red);/*径向渐变*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例效果图：
手抄书：
六、 实例演示: 背景图片的大小与位置的设定
背景属性导航图：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图</title>
<style type="text/css">
.box1{
width: 500px;
height: 300px;
background:gray url("images/1.jpg") no-repeat center ;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
