1、CSS盒子模型概述
盒子模型的内容范围包括：margin(外边距)、border(边框)、padding(内边距)、content(内容)部分组成。
2、内边距
内边距在content外，border内，属性有5个：
padding:设置所有边距
padding-bottom:设置底边距
padding-left:设置左边距
padding-right:设置右边距
padding-top:设置上边距
3、边框
我们可以创建效果出色的边框，并且可以应用于任何元素。边框的样式为border-style，定义了10个不同的非继承样式，包括none。
4、外边距
围绕在内容外框的区域就是外边距，外边距默认为透明区域，外边距接受任何长度单位、百分数值。外边距常用属性：
margin:设置所有边距
margin-bottom:设置底边距
margin-left:设置左边距
margin-right:设置右边距
margin-top:设置上边距
5、外边距合成
如果两个一样的盒子，其margin都是100px，盒子上下排列，盒子之间的margin会自动合成，为100px，而不会为200px。
6、盒子模型应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒子模型的应用</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="top">
<div class="top_content"></div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>
</body>
</html>
对应的css文件：
*{
margin:0px;
padding:0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
}
.body{
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: blanchedalmond;
}
.body_img{
width: 100%;
height: 400px;
background-color :darkorange;
}
.body_content{
width:100%;
height: 1100px;
background-color: blueviolet;
}
.body_no{
width: 100%;
height: 50px;
background-color: aqua;
}
.footing{
width: 75%;
height: 400px;
background-color: coral;
margin:0px auto;
}
.footing_content{
width: auto;
height: 330px;
background-color: chartreuse;
}
.footing_subnav{
width: auto;
height: 70px;
background-color: black;
}