一、默写盒模型的全部属性,并准确说出他们的应用场景
1.margin属性：外边距用于设置元素跟元素之间的距离
2.padding属性：内边距设定内容与盒子边缘的距离
3.border属性：显示盒子的边框
4.background属性：设置盒子的背景
二、`box-sizing`: 解决了什么问题, 不用它应该如何处理
box-sizing解决了内边距与边框对盒子大小的影响，设置box-sizing后再设置边框后都会再设置的像素内。
三、盒子外边距之的合并是怎么回事,并实例演示
同级盒子之间的外边距会出现合并、会以属性值大的为最终外边距
实例
<!DOCTYPE html>
<
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子外边距之间的合并</title>
<style>
.box1{
width: 150px;
height: 150px;
margin-bottom: 20px;
background-color: #b20e00;
}
.box2{
width: 200px;
height:200px;
margin-top: 30px;
background-color: #ffc600;
}
/*同级盒子之间的外边距会出现合并、会以属性值大的为最终外边距*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
嵌套盒子的子盒子设置外边距的上边距会被传递出去，如果要实现子盒子居中显示可使用marigin：auto 上下居中需要使用父盒子的内边距来实现。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子之间内边距与外边距的表现有何不同, 如何处理</title>
<!--嵌套盒子的子盒子设置外边距会被传递出去，如果要实现子盒子居中显示可使用marigin：auto
上下居中需要使用父盒子的内边距来实现。-->
<style>
.box2{
border: 10px solid #000000;
width: 300px;
height: 150px;
background-color:#b20e00;
box-sizing: border-box;
}
.box3{
width: 150px;
height: 100%;
background-color:#ffc600;
/* margin-left:auto;
margin-right: auto;*/
/*由于两边都自动所以把元素挤到中间了 因为两边都居中所以可以直接使用marigin：auto*/
margin: auto;;
}
</style>
</head>
<body>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、实例演示: 背景颜色的线性渐变的
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色的线性渐变</title>
<style>
.box{
width: 500px;
height: 500px;
/*线性横向渐变从左到右*/
background: linear-gradient(to left,#b20e00,#ffc600);
/*线性渐变右下方*/
background: linear-gradient(to right bottom,#b20e00,#ffc600);
/*角度渐变*/
background: linear-gradient(30deg,#b20e00,#ffc600);
/*径向渐变*/
background:radial-gradient(100px 100px,#b20e00,#ffc600,#009999);
/*径向渐变从角上*/
background:radial-gradient(at left top,#b20e00,#ffc600,#009999);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
六、演示: 背景图片的大小与位置的设定
实例
p<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片的大小与位置的设定</title>
<style>
.box1 {
width: 500px;
height: 300px;
border: 1px solid #009999;
background-image: url("timg.jpg");
background-repeat: no-repeat;
/*超出尺寸裁剪掉*/
/* background-size: cover;*/
/*固定背景*/
/* background-attachment: fixed;*/
/*等比例把图片完全显示到盒子里*/
/* background-size: contain;*/
background-size: 400px;
/*设置图片位置*/
/*background-position:top;*/
background-position:center;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
