一、默写盒模型的全部属性,并准确说出他们的应用场景
1、width：设置盒子的宽度
2、height：设置盒子的高度
3、border：设置盒子的边框属性，包括是否显示边框，边框线的种类、颜色
4、background：背景
5、padding：内边距，设置盒子边框与内容之间的距离
6、margin：外边距，设置盒子边框与外部元素之间的距离
二、 `box-sizing`: 解决了什么问题, 不用它应该如何处理
1、没有设置box-sizing:border-box，width/height=content
2、设置了box-sizing:border-box，width/height=content+padding+border
三、盒子外边距之的合并是怎么回事,并实例演示
同级盒子之间,同时添加外边距,并未出现想象中的边距叠加，而是出现了外边距的合并, 这种现象, 也叫外边距的塌陷
二个盒子之间的间距, 最终由以较大值确定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距的塌陷</title>
</head>
<style>
div {
box-sizing: border-box;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
margin-bottom: 20px;
}
.box2{
width: 150px;
height: 150px;
background-color: lightpink;
margin-top: 30px;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
1、当父盒子不设置边框时，设置子盒子的margin上边距，会发生子盒子上边距传递到父盒子上
2、解决方法：给父盒子设置padding内边距，或者给父盒子设置边框
五、实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色的线性渐变的</title>
<style>
.box {
border: 1px solid gray;
width: 450px;
height: 500px;
box-sizing: border-box;
}
.box {
/*从蓝到白, 默认从上到下方向渐变*/
background: linear-gradient(green, white);
/*!*向右渐变*!*/
/*background: linear-gradient(to right,green, white);*/
/*!*向左渐变*!*/
/*background: linear-gradient(to left,green, white);*/
/*!*向上渐变*!*/
/*background: linear-gradient(to top,green, white);*/
/*!*向右下方渐变*!*/
/*background: linear-gradient(to right bottom,green, white);*/
/*!*角度渐变*!*/
/*background: linear-gradient(30deg,green, white);*/
/*!*可连续设置多种颜色的渐变效果, 很少用到*!*/
/*background: linear-gradient(red, green, blue, white);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
border: 1px solid gray;
width: 450px;
height: 500px;
box-sizing: border-box;
}
.box {
/*设置背景图片*/
background-image: url("../images/dog.jpg");
/*设置背景重复: repeat, no-repeat, repeat-x, repeat-y*/
background-repeat: no-repeat;
/*设置背景图片的位置: 水平, 垂直*/
/*支持关键字设置*/
/*background-position: center center;*/
/*background-position: left center;*/
/*background-position: right bottom;*/
/*支持数值或百分比*/
/*background-position: 75px 75px; !* 水平垂直居中 *!*/
background-position: 50% 50%;
/*设置背景图片的大小*/
/*图片拉伸等比例填充,完全覆盖盒子,比例不同可能会有部分图片内容被隐藏*/
background-size: cover;
/*图片完全填充, 比例不同,盒子可能会出现空白区域*/
/*background-size: contain;*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、总结
学习了CSS的盒子模型，内外边距的控制，同级盒子外边距的塌陷，子盒子margin上边距的传递，渐变颜色和背景的控制。
