CSS

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距边框 和 外边距 的方式。

CSS 框模型概述

CSS 框模型

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

CSS 框模型实例

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的 DTD(Document Type Definition),大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

术语翻译

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

在 w3school,我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距,边框外的空白是外边距,很容易记吧:)

边框与背景

CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。

没有边框

在前面的例子中,您已经看到,如果希望显示某种边框,就必须设置边框样式,比如 solid 或 outset。

那么如果把 border-style 设置为 none 会出现什么情况:

尽管边框的宽度是 50px,但是边框样式设置为 none。在这种情况下,不仅边框的样式没有了,其宽度也会变成 0。边框消失了,为什么呢?

这是因为如果边框样式为 none,即边框根本不存在,那么边框就不可能有宽度,因此边框宽度自动设置为 0,而不论您原先定义的是什么。

记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。根据以下规则,所有 h1 元素都不会有任何边框,更不用说 20 像素宽了:

由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。

透明边框

我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:

我们为上面的链接定义了如下样式:

从某种意义上说,利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。

重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent 的支持。在以前的版本,IE 会根据元素的 color 值来设置边框颜色。

CSS margin 属性

margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

值复制

还记得吗?我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。

有时,我们会输入一些重复的值:

通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:

这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

  • 如果缺少左外边距的值,则使用右外边距的值。
  • 如果缺少下外边距的值,则使用上外边距的值。
  • 如果缺少右外边距的值,则使用上外边距的值。

下图提供了更直观的方法来了解这一点:

CSS 值复制

换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:

这种办法有一个小缺点,您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素,下外边距和右外边距设置为 30 像素。在这种情况下,必须写作:

这样才能得到您想要的结果。遗憾的是,在这种情况下,所需值的个数没有办法更少了。

再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):

同样的,这样才能得到你想要的效果。问题在于,键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距,请使用单边外边距属性。

提示和注释

提示:Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。

简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

CSS 外边距合并实例 1 

 

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:

CSS 外边距合并实例 2 

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

CSS 外边距合并实例 3

如果这个外边距遇到另一个元素的外边距,它还会发生合并:

CSS 外边距合并实例 4

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

CSS 外边距合并的实际意义

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS 伪类用于向某些选择器添加特殊的效果。

语法

伪类的语法:

CSS 类也可与伪类搭配使用。

锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

提示:伪类名称对大小写不敏感。

伪类与 CSS 类

伪类可以与 CSS 类配合使用:

假如上面的例子中的链接被访问过,那么它将显示为红色。

CSS2 – :first-child 伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:

在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

给定以下规则:

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。

提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

注释:必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。

为了使您更透彻地理解 :first-child 伪类,我们另外提供了 3 个例子:

例子 1 – 匹配第一个 <p> 元素

在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素:

例子 2 – 匹配所有 <p> 元素中的第一个 <i> 元素

在下面的例子中,选择器匹配所有 <p> 元素中的第一个 <i> 元素:

例子 3 – 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素:

CSS2 – :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:

CSS 伪元素用于向某些选择器设置特殊效果。

语法

伪元素的语法:

CSS 类也可以与伪元素配合使用:

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:

实例

注释:"first-line" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-line" 伪元素:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

注释:"first-letter" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-letter" 伪元素:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (仅当 float 为 none 时)
  • text-transform
  • line-height
  • float
  • clear

伪元素和 CSS 类

伪元素可以与 CSS 类配合使用:

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多重伪元素

可以结合多个伪元素来使用。

在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:

CSS2 – :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入一幅图片:

CSS2 – :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入一幅图片:

导航栏

拥有易用的导航条对于任何网站都很重要。

通过 CSS,您能够把乏味的 HTML 菜单转换为漂亮的导航栏。

导航栏 = 链接列表

导航栏需要标准的 HTML 作为基础。

在我们的例子中,将用标准的 HTML 列表来构建导航栏。

导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的:

实例

现在,让我们从列表中去掉圆点和外边距:

实例

例子解释:

  • list-style-type:none – 删除圆点。导航栏不需要列表项标记。
  • 把外边距和内边距设置为 0 可以去除浏览器的默认设定。

以上例子中的代码是用在垂直、水平导航栏中的标准代码。

垂直导航栏

如需构建垂直导航栏,我们只需要定义 <a> 元素的样式,除了上面的代码之外:

实例

例子解释:

  • display:block – 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
  • width:60px – 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。

注释:请始终规定垂直导航栏中 <a> 元素的宽度。如果省略宽度,IE6 会产生意想不到的结果。

水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。

两种方法都不错,但是如果您希望链接拥有相同的尺寸,就必须使用浮动方法。

行内列表项

除了上面的“标准”代码,构建水平导航栏的方法之一是将 <li> 元素规定为行内元素:

实例

例子解释:

display:inline; – 默认地,<li> 元素是块元素。在这里,我们去除了每个列表项前后的换行,以便让它们在一行中显示。

对列表项进行浮动

在上面的例子中,链接的宽度是不同的。

为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:

实例

例子解释:

  • float:left – 使用 float 来把块元素滑向彼此。
  • display:block – 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
  • width:60px – 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

媒介类型

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如,"font-size" 属性可被用于显示器以及印刷媒介,但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,同时,在显示器上,sans-serif 字体更易阅读,而在纸媒介上,serif 字体更易阅读。

@media规则

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:

不同的媒介类型

注释:媒介类型名称对大小写不敏感。

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv 用于电视机类型的设备。

本节列出了在使用 CSS 时尽量避免使用的技术。

Internet Explorer Behaviors

它是什么?Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。

为什么要避免它?只有 Internet Explorer 支持 behavior 属性。

用什么代替?请使用 JavaScript 和 HTML DOM 取而代之。

例子 1 – Mouseover Highlight

下面的 HTML 文件中有一个 <style> 元素,它为 <h1> 元素定义了一个行为:

下面是 XML 文档 "behave.htc":

behavior 文件包含了针对元素的 JavaScript 和 事件句柄。

例子 2 – Typewriter Simulation

下面的 HTML 文件中有一个 <style> 元素,它为 id 为 "typing" 的元素定义了一个行为:

下面是 XML 文档 "behave.htc":



发表评论

电子邮件地址不会被公开。 必填项已用*标注