CSS盒子模型

  为什么叫盒子模型呢？我们在网页设计中常常听到的属性名词：内容（content）、填充（padding）、边框（border）、边界（margin），在我们日常生活中的盒子也具有这些属性。

 

  盒子模型的概念

 

  我们用一张图描述：

  所有页面的元素看作是一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间还有边界（margin）。一个盒子由4个独立的部分组成。

 

  第一个部分是边界（margin）。第二个部分是边框（border），边框可以有不同的样式。第三个部分是填充（padding），填充用来定义内容区域与边框之间的空白。第四部分是内容区域。

 

  填充、边框和边界都分为上、下、左、右4个方向，既可以分别定义，也可以统一定义。当使用CSS定义盒子的width（宽）和height（高）时，定义的并不是四个部分的总区域，实际是内容区域（content）的width和height。若要计算盒子所占的实际区域必须加上padding，border和margin。

  实际宽度=左边界+左边框+左填充+内容宽度（width）+右填充+右边框+右边界。

  实际高度=上边界+上边框+上填充+内容高度（height）+下填充+下边框+下边界。

 

  块级元素只能是矩形形状的，所以盒子模型适合于我们的块级元素。

 

  盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。上面的那张图就是标准W3C盒子模型。IE盒子模式的是：

  他们的区别是：IE盒子模型也包括内容（content）、填充（padding）、边框（border）、边界（margin），不同的是IE盒子模型的内容（content）的width和height包含了border和padding。