默写盒模型的全部属性,并准确说出他们的应用场景
宽度：width；高度：height；背景：background；内边距：padding；边框：border；外边距：margin
应用场景：
1、width用于设置宽度；height用于设置高度；
2、background-color设置背景颜色；background-color；background-image: url()设置背景图片
3、paddingy用于设置内边距 ；
当padding有4个值时，分别表示：上内边距、右内边距、下内边距、左内边距；
当padding只有3个值时，分别表示：上、[左右]、下；
当padding只有2个值时，分别表示：[上下]上、[左右]；
当padding只有1个值时表示，[上下左右]
单独设置某一个内边距：padding-top: 上内边距；padding-right: 右内边距；padding-bottom: 下内边距；padding-left: 左内边距
4、margin用于设置外边距
当margin有4个值时，分别表示：上外边距、右外边距、下外边距、左外边距；
当margin只有3个值时，分别表示：上、[左右]、下；
当margin只有2个值时，分别表示：[上下]上、[左右]；
当margin只有1个值时表示，[上下左右]
单独设置某一个外边距：margin-top: 上外边距；margin-right: 右外边距；margin-bottom: 下外边距；margin-left: 左外边距
5、border用于设置边框，边距是透明的只能设置宽度，但边框不同它还可以设置颜色和样式的如：border: 10px dotted green;设置边框为10像素，绿色虚线
`box-sizing`: 解决了什么问题, 不用它应该如何处理
box-sizing解决了内外边距与边框对盒子大小的影响
如果不用box-sizing那么在计算盒子大小时就要把内外边距与边框的大小也算进去。
盒子外边距之的合并是怎么回事,并实例演示
盒子外边距之的合并是指相邻的两个同级盒子，相邻的外边距是会合并的也叫外边距的塌陷,二个盒子之间的间距, 最终由以较大值确定
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子外边距之的合并</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
margin-bottom: 20px;
background: green;
}
.box2{
width: 300px;
height: 200px;
margin-top: 30px;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子之间，子盒子外边距会传递到父盒子,通过给父盒子添加内边距或边框来解决
实例演示: 背景颜色的线性渐变
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色的线性渐变</title>
</head>
<style type="text/css">
.box{
width: 400px;
height: 400px;
border: 1px solid #ccc;
background: linear-gradient(green,white);
}
</style>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片的大小与位置的设定</title>
<style type="text/css">
.box1{
width: 400px;
height: 400px;
border: 1px solid #ccc;
background:url(images/dog.jpg);
margin-bottom: 20px;
}
.box1{background-size: cover;}
.box1{background-clip: border-box;}
.box2{
width: 400px;
height: 400px;
border: 1px solid #ccc;
background:url(images/dog.jpg) no-repeat center center;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
