一、默写盒模型的全部属性，并准确说出他们的应用场景？
padding属性：当两个盒子嵌套在一起时可以通过设置外面盒子的内边距（padding 上下左右）来调整两个盒子之间的距离
margin属性：当两个盒子平级时可以通过设置外边距（margin）调试两个盒子之间的位置，当两个盒子都设置了外边距时两个盒子之间的距离等于大的外边距
border属性：显示盒子的边框
background属性：设置盒子的背景
width属性：设置盒子的宽度
height属性：设置盒子的高度
二、box-sizing：解决了什么问题，不用它应该如何处理？
1.我们可以利用box-sizing解决内边距与边框对盒子大小的影响，若不用box-sizing则在计算盒子大小时也要将内边距与边框算进去手动改变盒子大小
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置border后宽高变为520 420 */
div{
width: 500px;
height: 400px;
border: 10px solid black;
}
div img{
width: 100%;
}
/* 设置了box-sizing后宽高没有变化 */
.box1{
box-sizing: border-box;
}
/* 不设置box-sizing则需要改变盒子的宽高 */
.box2{
width: 480px;
height: 380px;
}
</style>
</head>
<body>
<p>二、box-sizing：解决了什么问题，不用它应该如何处理？</p>
<p>我们可以利用box-sizing解决内边距与边框对盒子大小的影响，若不用box-sizing则在计算盒子大小时也要将内边距与边框算进去手动改变盒子大小</p>
<div>
<img src="../../img/2.jpg" />
</div>
<div class="box1">
<img src="../../img/2.jpg"/>
</div>
<div class="box2">
<img src="../../img/2.jpg"/>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、盒子的外边距的合并是怎么回事并实例演示
1. 当两个盒子都设置了外边距时两个盒子之间的距离等于大的外边距也叫外边距的塌陷
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*同级盒子之间 两个盒子之间的间距为30px */
div{
width: 250px;
height: 150px;
border: 1px solid black;
}
.box1{
margin: 20px;
}
.box2{
margin: 30px;
}
/* margin:auto;水平居中 */
.box3{
width: 125px;
height: 75px;
margin: auto;
}
</style>
</head>
<body>
<h2>三、盒子的外边距的合并是怎么回事并实例演示</h2>
<p>
当两个盒子都设置了外边距时两个盒子之间的距离等于大的外边距也叫外边距的塌陷
</p>
<div class="box1"></div>
<div class="box2"></div>
<div>
<div class="box3"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、嵌套盒子之间内边距与外边距的表现有何不同，如何处理？
1.表现：在子盒子中设置margin-top时会传递到父盒子（与在父盒子中设置一样）处理：在父盒子中设置padding
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 300px;
height: 300px;
background-color: lightblue;
/* margin-top: 30px; *//* 与在子盒子中设置外边距一样 */
padding-top: 30px;/* 改变了子盒子的位置 */
}
.box2{
background-color: lightgreen;
width: 200px;
height: 200px;
margin-top: 30px; /* 子盒子设置的外边距传递到了父盒子 */
margin-left: 40px;/* 不会传递到父盒子*/
}
</style>
</head>
<body>
<h2>四、嵌套盒子之间内边距与外边距的表现有何不同，如何处理？</h2>
<p>
1.表现：在子盒子中设置margin-top时会传递到父盒子（与在父盒子中设置一样）处理：在父盒子中设置padding
</p>
<hr />
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、实例演示背景颜色的线性渐变
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
/* 从上往下渐变绿到蓝 */
/* background:linear-gradient(green,blue); */
/* 向右渐变 */
/* background: linear-gradient(to right,green,white); */
/* 向左渐变 to left*/
/* background: linear-gradient(to left,green,white); */
/* 向上渐变to top */
/* background: linear-gradient(to top,green,white); */
/* 向左上方 to top left*/
/* background: linear-gradient(to top left,green,white); */
/* 角度渐变 */
/* background: linear-gradient(130deg,green,white); */
/*可连续设置多种颜色的渐变效果,不常用*/
background: linear-gradient(black, green, blue, orange);
}
</style>
</head>
<body>
<h2>五、实例演示背景颜色的线性渐变</h2>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
六、背景图片的大小与位置的设定
总结：在设置背景图片位置时如果设置了background-attachment: fixed;图片会基于整个页面居中
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
box-sizing: border-box;
border: 1px solid gray;
/*盒子可以设置阴影*/
/*参数: 水平偏移,垂直偏移,模糊度,颜色*/
box-shadow: 5px 5px 2px #888;
background-color: lightblue;
background-image: url(../../img/1.jpg);
/* 设置背景重复no-repeat(不) repeat（重） repeat-x, repeat-y */
background-repeat: no-repeat;
/* 设置图片是否跟随滚动条滚动 */
/* background-attachment: fixed; */
/* 设置背景图片位置 */
background-position: center center;/* 上下水平居中或写成50% 50% 设置了background-attachment: fixed;后图片会基于整个页面居中*/
background-size: 150px;/* 设置图片大小 */
/*图片拉伸等比例填充,完全覆盖盒子,比例不同可能会有部分图片内容被隐藏*/
/* background-size: cover; */
/*图片完全填充, 比例不同,盒子可能会出现空白区域*/
/* background-size: contain; */
}
</style>
</head>
<body>
<h2>背景图片的大小与位置的设定</h2>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果：
