作业一：默写盒模型的全部属性,并准确说出他们的应用场景
实例
作业一:盒子模型全部属性及应用场景 盒子属性有； width:设置盒子宽度 height：设置盒子高度 margin:设置盒子外边距确定盒子位置（一个盒子的外边距是没有意义的） padding:盒子中的内边距 由于嵌套盒子中子盒子的外边距会传递给父盒子 此时可以 通过给夫盒子设置内边距达到让子盒子父盒子内位置下移的目的 border:盒子边框 有 大小（px） 实虚线 颜色三个属性 background：背景 有背景色和背景图片
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业二：box-sizing`: 解决了什么问题, 不用它应该如何处理
实例
box-sizing 解决了神魔问题 不用它要如何处理？ box-sizing:border-box 这个样式 解决了我们在修改盒子边框与内边距 时盒子大小发生变化的问题 因为开发时盒子所能占有空间大小是有限制的 加上这个样式后原图会自动变化 使 边框+外边距+盒子总大小与原盒子相同 如果不用我们就只能在修改盒子边框和内边距的同时手动修改图片大小 这里可以设置盒子内图片的width:100% 让其自适应盒子的大小变化
运行实例 »点击 "运行实例" 按钮查看在线实例
作业三：盒子外边距之的合并是怎么回事,并实例演示
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style>
.a{
width: 50px;
height: 50px;
background-color: red;
margin-bottom: 20px;
}
.b{
width: 100px;
height: 100px;
background-color: green;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业四：嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
实例
<!-- 由于我给大盒子加了一个左内边距此时内部盒子的外边距到不了大盒子边框 说明二者没有重叠
内部盒子如果加 margin 并且两个盒子没有边框那么会发生外边框转移而想要实现真正的效果可以对父盒子的padding进行设置 使用子盒子的外边距可以使子盒子实现水平居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业四</title>
<style>
.a{
/*border: 10px solid red;*/
width: 100px;
height: 100px;
background-color: green;
}
.b{
/*border: 1px solid green;*/
width: 50px;
height: 50px;
background-color: red;
margin-bottom: -200px;
/*margin-left: 20px;*/
/*margin-left: auto;
margin-right: auto;*/
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
作业五：实例演示: 背景颜色的线性渐变
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业五</title>
<style>
.a{
width: 100px;
height: 100px;
background:linear-gradient(blue,green);/*默认从上往下*/
background:linear-gradient(to top,blue,green);
background:linear-gradient(to right bottom,blue,green);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业六：这例演示: 背景图片的大小与位置的设定
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业六</title>
<style>
.a{
width: 600px;
height: 600px;
border: 1px solid green;
background-image:url(./sl.jpg);
background-position: center; /*center 像素 百分比 top left: 等设置方式*/
background-repeat: no-repeat;
background-size: 100px,100px;/*修改背景图片大小拉伸*/
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
