为什么叫盒子模型呢?我们在网页设计中常常听到的属性名词:内容(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。