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的非标准模型,所以在使用的时候,我们尽量不要给具有指定宽度的元素添加填充,而是把填充或空白边添加到元素的父元素或子元素中。

没有评论: