*1默写盒模型的全部属性,并准确说出他们的应用场景
width: 设置宽度
height: 设置高度
background: 背景
背景色
background-color: 设置背景色,
background-clip: 设置背景色应用范围(裁切)
background: linear-gradient(): 线性渐变
background: radial-gradient(): 径向渐变
背景图片
background-image: url(): 设置背景图片
background-position: 设置背景图片显示位置
background-size: 设置背景图片显示大小
background-repeat: 设置背景图片是否重复
background-attachment: 设置背景图片是否随滚动条滚动
padding: 内边距 margin: 外边距
padding/margin-top: 上边距
padding/margin-right: 右边距
padding/margin-bottom: 下边距
padding/margin-left: 左内边距
border: 边框border每个方向上都可以设置width,style,color三个特征
2.box-sizing`: 解决了什么问题, 不用它应该如何处理
答：解决了内边距和边框对盒子大小的影响，不用我们的处理方式是width=需求的width-左右内边距-左右边框像素heigh=需求的heigh-上下内边距-上下边框像素
* 盒子外边距之的合并是怎么回事,并实例演示
同级盒子之间,添加外边距后,出现了外边距的合并, 盒子之间的间距, 最终由以较大值确定。
* 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
用父盒子内边距会撑大父盒子改变大小,影响布局，可以用计算的方式设定父盒子大小，也可以用box-sizing来处理。
子盒子外边距会传递到父盒子,通过给父盒子添加内边距或边框来解决。
* 实例演示: 背景颜色的线性渐变的 * 这例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
width: 300px;
height: 350px;
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))
}
.box2{
width: 300px;
height: 350px;
background-image:url('smiley.gif');
background-position:center;
background-size:50% 50%;
}
.box3{
box-sizing: border-box;
width: 500px;
height: 500px;
border: #0b0b0b solid 3px;
background: #3c763d;
}
.box4{
width: 300px;
height: 300px;
border: #9a0000 solid 5px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box1">背景颜色的线性渐变实例</div>
<div class="box2">背景图片的大小与位置的设定</div><hr>
<div class="box3"><div class="box4">嵌套盒子</div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
