我的书签
添加书签
移除书签13.3 CSS框模型
在CSS中，框模型(（Bx Model)是最重要的基石之一，它指定元素如何显示以及（在某种程度上）如何交互。页面上的每个元素被看做一个矩形框，这个框由元素的内容、内边距（也可以称为填充）、边框和外边距（也可以称为空白或空白边）组成，如图13-6所示。
其中，元素框的最内侧部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置。如下面的代码所示：
*
{
margin：0；
padding：0；
}
在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。如图13-7所示，假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。
图 13-6 框模型
图 13-7 框模型的宽度描述
图13-7的样式如下：
mybox
{
margin：10px；
padding：5px；
width：70px；
}
最后，需要说明的是，内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。
13.3.1 内边距
如图13-6所示，元素的内边距位于边框和内容区之间，其属性如表13-11所示。
其中，padding属性的值可以是长度值或百分比值，但不允许使用负值。例如，如果希望所有h1元素的各边都有12像素的内边距，那么可以设置padding属性如下：
h1
{
padding：12px；
}
当然，还可以使用padding属性来按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。如下面的代码所示：
h1
{
padding：12px 0.25em 2ex 20%；
}
值得注意的是，上面的这种CSS写法虽然简单，但可读性不高，尤其是针对CSS新手。因此，可以使用单边内边距属性来将上面的CSS改写如下（其结果一样）：
h1
{
padding-top：12px；
padding-right：0.25em；
padding-bottom：2ex；
padding-left：20%；
}
13.3.2 边框
在HTML中，CSS边框属性(（brder)是非常重要也是使用最为普遍的属性，通过使用CSS边框属性，可以在页面里创建出效果出色的边框，并且可以应用于任何元素。通常，每个边框有三个方面的内容，即宽度、样式以及颜色，详细属性如表13-12所示。接下来，将围绕这三个方面来详细阐述如何设置边框的属性。
1.边框的样式
样式是边框最重要的一个方面，这不仅仅是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，就根本没有边框。如表13-12所示，可以使用border-style属性来定义边框的样式。border-style属性的值如表13-13所示。
例如，通过border-style属性，可以把一幅图片的边框定义为outset，使它看上去像是“凸起按钮”。代码如下所示：
a:link img
{
border-style:outset；
}
当然，还可以使用border-style属性为一个边框定义多个样式。如下面的代码所示：
p
{
border-style:dotted solid double dashed；
}
注意，这里的border-style属性的值还是采用了上、右、下、左的顺序，即上面的样式表示为：上边框是点状，右边框是实线，下边框是双线，左边框是虚线。
同样，为了增加样式的可读性，可以使用单边样式属性来将上面的CSS改写如下，其结果相同：
p
{
border-top-style:dotted；
border-right-style:solid；
border-bottom-style:double；
border-left-style:dashed；
}
2.边框的宽度＜/p＞
在CSS中，可以通过border-width属性来为边框指定宽度。通常情况下，为边框指定宽度有如下两种方法：
1）直接指定长度值，这也是最经常使用的方法。如下面的代码所示；
p
{
border-style:solid；
border-width：5px；
}
2）使用三个关键字之一，即thin、medium（默认值）和thick。值得注意的是，CSS没有定义这三个关键字的宽度，具体取决于用户代理，即一个用户代理可能把thin、medium和thick分别设置为5px、3px和2px，而另一个用户代理则分别设置为3px、2px和1px。因此，建议最好使用指定长度值的方法来为border-width属性设置相关的值。
同边框的样式一样，同样可以采用上、右、下、左的顺序来为边框的宽度赋值。如下面的代码所示：
p
{
border-style:solid；
border-width：15px 5px 15px 5px；
}
当然，也可以使用单边宽度属性来将上面的CSS改写如下（其结果一样）：
p
{
border-style:solid；
border-top-width：15px；
border-right-width：5px；
border-bottom-width：15px；
border-left-width：5px；
}
在前面的例子中已经看到，如果希望显示某种边框，就必须设置边框样式border-style，如solid或outset。那么如果把border-style设置为none会出现什么情况？
p
{
border-style:none；
border-width：10px；
}
在上面的样式代码中，尽管边框的宽度border-width设置为10px，但是边框样式border-style设置为none。在这种情况下，不仅边框的样式没有了，其宽度也会变成0。边框消失了，为什么呢？这是因为如果边框样式为none，即边框根本不存在，那么就不可能有宽度，因此边框宽度自动设置为0，而不管你设置的值是什么，这一点非常重要。
3.边框的颜色
设置边框颜色非常简单，可以通过border-color属性来为边框设置非常漂亮的颜色。其中的颜色值可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制或者RGB值。同边框的宽度设置一样，在设置边框的颜色之前，必须设置边框样式border-style，如solid或outset。如下面的代码所示：
p
{
border-style:solid；
border-color:blue；
}
如果要为各个边框单独设置颜色值，同样是采用上、右、下、左的顺序来设置。如下面的代码所示：
p
{
border-style:solid；
border-color:blue red blue red；
}
同边框的样式与宽度一样，可以使用单边颜色属性来代替上面的border-color属性。如下面的代码所示：
p
{
border-style:solid；
border-top-color:blue；
border-right-color:red；
border-bottom-color:blue；
border-left-color:red；
}
最后，需要说明的是，默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另外，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为color可以继承）。这个父元素很可能是body、div或另一个table。
13.3.3 外边距
如图13-6所示，围绕在元素边框的空白区域是外边距。在CSS中，可以通过margin属性来设置它，如表13-14所示。margin属性接受任何长度单位（如像素、英寸、毫米或者em)、百分数值甚至负值。当设置外边距时，会在元素外创建一个额外的“空白”。
在日常使用中，margin属性可以设置为auto。但更常见的做法是为外边距设置长度值。如下面的声明在h1元素的各个边上设置了2px宽的空白：
h1
{
margin：2px；
}
与内边距一样，同样可以采用上、右、下、左的顺序来设置外边距。如下面的代码所示：
h1
{
margin：10px 0px 15px 5px；
}
除了采用上面的margin属性外，还可以采用单边外边距属性来设置外边距的各个边的值。如下面的代码所示：
h1
{
margin-top：10px；
margin-right：0px；
margin-bottom：15px；
margin-left：5px；
}
需要说明的是，margin属性的默认值是0，所以如果没有为margin属性声明一个值，就不会出现外边距。但是在实际应用中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持CSS的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为p元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要特别声明，就会覆盖默认样式。
1.值复制
其实，对于值复制这个概念，相信大家并不陌生，内边距与边框同样具有该特性。如下面的外边距例子：
h1
{
margin：15px 5px 15px 5px；
}
对于上面的h1，通过值复制，可以不必重复地输入这对数字。上面的样式与下面的样式是等价的：
h1
{
margin：15px 5px；
}
或许这时候你会问，这两个值是如何取代前面4个值的呢？其实，CSS定义了一些规则，允许为外边距（内边距与边框同理）指定少于4个值。规则如下：
图 13-8 值复制规则
1）如果缺少左外边距的值，则使用右外边距的值。
2）如果缺少下外边距的值，则使用上外边距的值。
3）如果缺少右外边距的值，则使用上外边距的值。
图13-8提供了更直观的方法来了解这一点。
换句话说，如果为外边距指定了3个值，则第4个值（即左外边距）会从第2个值（右外边距）复制得到。如果给定了两个值，第4个值会从第2个值复制得到，第3个值（下外边距）会从第1个值（上外边距）复制得到。如果只给定一个值，那么其他3个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，只需指定必要的值，而不必全部都应用4个值。如下面的例子所示：
h1
{
margin：0.25em 1em 0.5em；/等价于0.25em 1em 0.5em 1em/
}
h2
{
margin：0.5em 1em；/等价于0.5em 1em 0.5em 1em/
}
p
{
margin：1px；/等价于1px 1px 1px 1px/
}
其实，这种值复制也有一个小缺点，以后肯定会遇到这个问题。假设希望把p元素的上外边距和左外边距设置为5像素，下外边距和右外边距设置为10像素。在这种情况下，就必须写成如下样式：
p
{
margin：5px 10px 10px 5px；
}
遗憾的是，在这种情况下所需值的个数没有办法更少了，值复制在这里并没有什么作用。要提醒大家的是，在样式设计中，为了提高样式文件的可读性和维护的方便性，应尽量使用单边样式属性进行设置。可以说，单边样式属性本身就是一份很好的样式说明文档，不论样式设计新手还是老手都能够看得明白。
2.外边距合并
外边距合并，也可以称为外边距叠加。简单地讲，外边距合并指的是当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。值得注意的是，只有普通文档流中块框的垂直外边距才会发生外边距合并，而行内框、浮动框或绝对定位之间的外边距是不会发生合并的。虽然这是一个比较简单的概念，但在对网页进行布局时，往往会造成许多混淆。因此，应该了解这种合并的发生情况与原理。
通常，有两种情况的布局会导致外边距合并现象：
1）当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。如图13-9所示，当第一个元素的下外边距(（mrgin-bottom：20px)与第二个元素的上外边距(（mrgin-top：10px)发生合并时，合并后的值取最大值，即第一个元素的下外边距(（mrgin-bottom：20px)的值。
2）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上外边距和（或者）下外边距也会发生合并，合并后的值仍然取最大的值，如图13-10所示。
其实，这种外边距合并虽然看上去可能有点奇怪，甚至不可思议，但是实际应用中，它是非常有意义的。以由几个段落组成的典型文本页面为例：第一个段落上面的空间等于段落的上外边距，如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这就意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
图 13-9 外边距合并的第一种情况
图 13-10 外边距合并的第二种情况
