所有实例可以直接运行
* 默写盒模型的全部属性,并准确说出他们的应用场景
content 内容，可以是文本或图片；
padding 内边距，用于定义内容与边框之间的距离；
margin 外边距，用于定义当前元素与其他元素之间的距离；
border 边框，用于定义元素的边框。
* `box-sizing`: 解决了什么问题, 不用它应该如何处理
答：box-sizing用于设置盒子模型，限制盒子的大小。不用box-sizing的话应该设置盒子的边框与内边距。
* 盒子外边距之间的合并是怎么回事,并实例演示
答：同级盒子外边距会合并，取较大值；嵌套盒子外边距会传递，内层传递到外层
以下实例可以直接运行
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距对盒子位置的影响</title>
<style type="text/css">
div{box-sizing: border-box;}
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 150px;
height: 150px;
background-color: lightgreen;
}
/*上面盒子下外边距20px*/
.box1{
margin-bottom: 20px;
}
/*下面盒子上外边距50px*/
.box2{
margin-bottom: 50px;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
/*子盒子外边距30px*/
.box4{
margin-top: 30px;
}
</style>
</head>
<body>
<h2>同级关系: 外边距合并</h2>
<div class="box1"></div>
<div class="box2"></div>
<hr>
<h2>嵌套关系 外边距由内向外传递</h2>
<div class="box3">
<div class="box4"></div>
</div>
<hr>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 嵌套盒子之间内边距与外边距的表现有何不同, 如何处理
答：嵌套盒子外边距会传递，内层传递到外层。想要给子盒子增加外边距时，只要给父盒子增加内边距即可。
* 实例演示: 背景颜色的线性渐变的
以下实例可以直接运行
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景控制</title>
<style type="text/css">
.box1{
width: 450px;
height: 500px;
box-sizing: border-box;
}
.box2{
width: 450px;
height: 500px;
box-sizing: border-box;
}
.box1 {
background: linear-gradient(blue, white);
}
.box2 {
background: linear-gradient(to right,green, white);
}
</style>
</head>
<body>
<h2>从蓝到白, 默认从上到下方向渐变</h2>
<div class="box1"></div>
<h2>从绿到白, 向右渐变</h2>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
* 实例演示: 背景图片的大小与位置的设定
以下实例可以直接运行
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景控制</title>
<style type="text/css">
.box2{
width: 1200px;
height: 1200px;
border: 10px dotted blueviolet;
background-image: url("http://b-ssl.duitang.com/uploads/item/201208/30/20120830173930_PBfJE.jpeg" );
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<h2>图片位置和大小，水平居中</h2>
<div class="box2">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
