盒子模型

  在网页布局中,为了使网页中各个元素能合理地进行组织,通过研究总结出了一套完整地,有效的原则和规范,这就是盒子模型.盒子模型由content(内容),border(边框),padding(内边距),margin(外边距)共四个部分组成.

  一个盒子实际上在页面上占据的空间是由"内容+内边距+外边距+边框"组成的,可以通过设定盒子的border,padding和margin来实现各种各样的排版效果.并不是使用div定义的网页元素才是盒子,所有的网页元素都可以看做是盒子.

   这是我从<<Web前端开发技术>> 这本书上截下来的图:

   我初次看这张图，我并不了解它真正想讲什么，貌似比较生硬，眼睛自动过滤 ==看不明白，但是其实盒子模型一点不难理解，而且非常简单，只要你拿实物对比就知道了。所以我在这里拿月饼来做对比

来看一下月饼：

来一张五仁月饼的图:

content(内容): 可以看做是里头的五仁月饼

padding(内边距): 你把月饼放进盒子的时候,你不可能会把月饼紧挨着包装盒放(当然也可以,这时候就是padding(内边距)为0,只是不雅观),所以月饼和包装盒之间也是有一定的距离,这个距离就叫做内边距.  月饼距离盒身也会有上下左右的衡量方式，所以就会有 padding-left，padding-right，padding-bottom，padding-top。

border(边框):可以看作月饼的包装盒,包装盒也是有自己的宽度(厚度)的.上边的那个装月饼的盒子或竹盒它的厚度就是盒子的边框.同样月饼盒如果不是统一的厚度，也会有border-left，border-right，border-bottom，border-top。

height(高度)、width(宽度):这个经常用到,但是到底是哪一个高度（宽度）才是我们平时设置的高度（宽度）呢?当然是五仁月饼自身的高度和宽度了。

margin （外边距）：如果你买了两个月饼，你把这两个月饼放在一个大盒子里，这两个月饼都各自有自己的包装，这两个月饼之间也是有距离的，当然你也可以把这两个月饼盒放在一块紧贴着，这样他们彼此的外边距就是0.同样也会有一个 :

margin-left，margin-right，margin-bottom，margin-top。margin会直接影响与其他盒子直接的关系.

如下图:

月饼占据的空间 = 月饼本身 （content）+ 月饼距离盒子的距离（padding）+整个月饼的外边距（margin） + 月饼盒的厚度（border）。