所谓盒模型，就是浏览器为每个HTML元素生成的矩形盒子。即HTML页面实际上就是由一系列盒子组成。这些盒子是按照可见版式在页面上排布的。并由三个属性进行控制：position属性，display属性,float属性。
position属性：控制页面元素之间的位置关系
display属性:控制元素的堆叠、并排、显示
float属性:提供控制方式，以便把元素组成多栏布局
需要说明的是，默认情况下，我们是看不到盒子的。
每个盒子都有三个属性：
边框（border）：可以设置边框的宽窄、样式和颜色
内边距（padding）：可以设置盒子内容区与边框的间距
外边距（margin）：设置盒子与盒子的间距
下面我用一张图来展示下
一个盒子有四天边，因此，边距、内边距、外边距各有top、right、bottom、left四条边
好啦，说了那么多废话，我们来实际的演示下
首先了，创建具有两个段落的HTML文档
<!DOCTYPE html>
<html>
<head>
<title>CSS盒模型演示</title>
<meta charset="utf-8">
<link href="in_css/box.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p_1">
西山白雪三城戍，南浦清江万里桥。<br>
海内风尘诸弟隔，天涯涕泪一身遥。<br>
惟将迟暮供多病，未有涓埃答圣朝。<br>
跨马出郊时极目，不堪人事日萧条。<br> </p>
<p class="p_2">
锦瑟无端五十弦，一弦一柱思华年。<br>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
沧海月明珠有泪，蓝田日暖玉生烟。<br>
此情可待成追忆，只是当时已惘然。<br> </p> </body>
</html>
然后，设置第一个段落的外边距为100px，在浏览器中查看效果
我们可以看到整个段落外边距情况
当单独为每条外边距编写样式的时候。显示如下
p.p_1{
margin-top: 100px;
margin-right: 400px;
margin-bottom: 50px;
margin-left: 400px;
}
几种简写说明：
①
p.p_1{
margin: 200px 500px 20px 500px;
}
不写全
margin-top:200px;margin-right: 500px;margin-bottom:20px;margin-left: 500px;
默认按照顺时针顺序设置外边距
②自动取对边值
margin-top:200px;margin-right: 500px;margin-bottom:20px;
上面的代码最后一个外左边距没有写出，它会自动取右边距的值。同理可以省去下外边距
③只写一个值
margin: 50px;
则四条外边距全部取一样的值
下文待续……