实例
<!DOCTYPE html>
<html>
<head>
<title>盒子模型的利用</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
.nav {
width: 300px;
height: 300px;
background-color: red;
margin: 50px 80px; /*设置盒子模型外边距为上下50px和左右80px*/
padding: 20px 40px;/*设置盒子模型内边距为上下20px和左右40px*/
border: solid 5px blue;设置盒子模型的边，为实线 粗细为5px 颜色为蓝色
border-top: solid 20px black;/*设置盒子的上边为实线 粗细为20像素 颜色为黑色*/
}
</style>
</head>
<body>
<div class="nav">
<p>123</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、通过以上案例，基本上了解了盒子模型的一个使用方法。
2、border\margin\padding分别是盒子边，盒子外边距，盒子内边中距。
3、盒子边可以设置样式，盒子外边距与盒子内边距只可以设置大小距离，因为padding与margin没有东西，所以只可以设置边距。
4、padding有很多种简写方式，都是上右下左这种设置边距，是顺时针来设置的。如果设置两个数量 ，就是先上下，在左右。 padding也可以单独设置一个边距或者两三个边距。单独设置上内边距是padding-top，padding-bottom下内边距，padding-left左内边距,padding-right边内边距
5、margin也有很多种简写方式，跟内边距的简写方式和单独设置的方式都是一样的
６、border是设置盒子的边。它可以有很多种写法，也有很多种样式。如border: solid 5px blue;这种就是设置边框的为实线，5像素粗，蓝色。还有比如设置上border-top这就是设置上边框。还可以单独设置颜色如border-top-color可以设置上边框的颜色。这个border还要多学习一下。
老师请帮解答一个疑问：为设置设置了内边距后，盒子的大小被撑大了。这个是什么原因或者 怎么可以理解清楚这种原因呢？
