关于盒模型

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样外形和平行空间。他有：外边距（margin）、边宽（border）、内边距（padding）、内容（content）如下图：

简单来说：内容（content）就是盒子里装的东西，填充（padding）就是我们每次拿快递时怕东西损坏而放的塑料泡沫等一些的填充物，边框（border）就是的盒子的本身，外边界（margin）就是盒子和盒子之间的距离。
来看下下面的一段代码：

显示出来的效果是这样的：

为了增加效果的我把字写上去了，这样看起来更清楚些。

在上面的例子中：
1.内容区域是最内部的里“我是内容”铺满的，由width：100px；height：100px；定义的
2.内边距是由padding属性定义的。
3.边宽是由border属性定义的。
4.外边距是由margin属性定义的。

padding与margin的作用和使用方法
Padding：
作用：用来控制父元素和子元素之间的位置关系;用来控制元素和内容间的位置关系。不可以写负值。
特点：
1.padding值会把元素原有的大小撑大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；
2.padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。
3.背景色会延展到padding区域。
使用方法：
方法一 ：
padding-top: 上填充
padding-right: 右填充
padding-bottom: 下填充
padding-left: 左填充
方法二 ：（复合写法） 解释：
padding：1 2 3 4 1、上 2、右3、下4、左
padding：1 2 3 1、上 2、左和右3、下
padding：1 2 1、上和下 2、左和右
padding：1 1、上 右 下 左

margin：
作用：控制同辈元素之间的位置关系。不会影响元素的实际宽高，但是也会曾加的他的所占区域，可以写负值。
特点： margin是现在是在元素边框以外的空白区。
使用方法：
方法一：
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距
方法二 ：（复合写法） 解释：
margin：1 2 3 4 1、上 2、右 3、下 4、左
margin：1 2 3 1、上 2、左和右 3、下
margin：1 2 1、上和下 2、左和右
margin：1 1、上 右 下 左

关于盒子的大小的计算
如上所述：
元素的总宽度=左外边距 +左边宽+左填充+内容宽度+右外边距 +右边宽+右填充;
元素的总宽度=margin-left+border-left+ padding-left+width+padding-right+border-right+margin-right；
元素的总高度=上外边距 +上边宽+上填充+内容高度+下外边距 +下边宽+下填充;
元素的总宽度=margin-top+border-top+ padding-top+height+padding-bottom+border-bottom+margin-bottom；