CSS教程系列七——标准框模型和IE非标准框模型

CSS中最重要的三个概念是：浮动(float)、定位(position)和框模型(box model，或称作盒模型)。这三种概念控制元素在页面上的排列和显示方式，它们是布局的基础，理解了这三种概念后，CSS在你的手中就如鱼得水，但真正的掌握往往在我们在日常进行了大量实践之后，所以一时不理解没有关系，学习本身就是一个反复的过程，多多实践，自然就会理解。

框模型是CSS的基石之一，网页上的每个元素都是一个矩形框，可能我们没有看到框本身，但是实际上我们所看到的内容都是包含在一个个的框中的，因为我们把框的边框隐藏了，如果需要我们就可以让它显示出来。例如：

<p>一些文字</p>

如果把这个段落放在网页中，我们肉眼上并不能看到框，但内在它就是一个框。我们可以定义样式：p {border:1px;}来把它的边框显示出来。

1.框的组成。

我们先抛开CSS，想像一下我们日常所见的矩形的框。既然是框就要有一个边框，框里面放着东西，里面的东西和框之间往往有一些空间，因为我们不可能把它塞得太满，还有什么呢？如果把这个框放在空间中，这个框与其它的物体往往也有一些距离，放得太挤了不好看。

也可以这样想像，我们在一张白纸上画一个矩形框，在框里面写字的时候，我们不可能紧靠着框的边，那样不美观，这样内容与边框之间就会空出一些距离，另外我们画框的时候也不会紧靠着纸的边，一般会留出一定的页边距。

边框、内容、内容和边框的距离和与其它物体的距离，这就是一般框的四项内容。

同样在CSS中的框也是由这四部分组成的。它们分别是：边框(border)、内容(content)、填充(padding)和边距(margin，也称作空白边)。我们可以形象的通过一张图片来看一下CSS中框的组成。

注意：填充是边框和内容之间的距离，空白边是边框和其它框之间的距离。如果给一个框添加背景，那么背景会应用于内容和填充组成的区域。

2.标准框模型的计算。

在布局的时候我们一般把页面分成几栏，这样就要计算各栏的宽度，框的宽度是怎么计算的呢？在CSS中我们是用width和height来定义框的宽度和高度的，一般意义上，我们会认为这个宽度(或高度)就是包含所有的四项的宽度(或高度)，但实际上不是这样的，标准框模型中，width和height的值仅指的是内容区域的宽度和高度，不包含其它三项，这有些不太合常规，但既然是这样规定的，我们就要接受这样的概念。

那么一个标准框的四项的总的宽度应该怎样计算呢？例如我们定义一个框：

#box {width:70px;

padding:5px;

margin:10px;}

这个框的总宽度是：70+5×2+10×2=100px。如图：

注意：width和height仅指内容区域的宽度和高度。空白边可以是负值。

3.IE的非标准框模型

IE是使用最多的浏览器，正因如此，微软才这样令人可恶，IE中有许多不合标准的地方，框模型就是其中之一。IE中的width和height的值是指除空白边之外的宽度和高度，它包含了内容区域和填充区域。这正是现实世界中我们比较熟悉的框。尽管这样，不同的标准会让网页在不同的浏览器里的显示方式大相径庭，会造成比较严重的后果。如果我们还像上面例子一样定义一个框，那么在IE中框的宽度是多少呢？

此时框的宽度为：70＋10×2＝90px

比上面的框小了10px，这10px是原来的填充的宽度，它现在去哪儿了呢？因为框的宽度为70px，这个宽度包含了内容和填充的宽度，所以内容区域的宽度为70－5×2＝60px。如图：

注意事项：正因为IE的非标准模型，所以在使用的时候，我们尽量不要给具有指定宽度的元素添加填充，而是把填充或空白边添加到元素的父元素或子元素中。