精通CSS:高级WB标准解决方案 第二章可视化格式模型 gin 在CSS中, width和 height指的是内容区域的宽度和高度。增加填充、边框和空白边不会影响内容区域 的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有10像素的空白边和5像素的填充,如果希望这个 框达到100像素宽,就需要将内容的宽度设置为70像素(见图2-2) yBOX dding 5px margin: 10px padding: 5px width 70px width: 70px 图2-2正确的框模型 填充、边框和空白边可以应用于一个元素的所有边,也可以应用于单独的边。空白边还可以是负值,并 且在多种技术中都要使用负值的空白边 2.1.1IE/Win和框模型 不幸的是,I5.x和IE6在怪异模式中使用自己的非标准框模型。这些浏览器的 width属性不是内容的 宽度,而是内容、填充和边框的宽度总和。这实际上有一定的意义,因为在现实世界中框具有固定的尺寸, 而且填充是放在框里面的。添加的填充越多,给内容留下的空间就越少。尽管符合逻辑,但是这些IE版本不 符合规范,这会造成严重的问题。例如,在前面的示例中,在IE5.x中框的总宽度只有90像素。这是因为IE 5.x认为每个边上5像素的填充是70像素的宽度的一部分,而不是在宽度之外附加的(见图2-3)。 padding 5px width 70px 10px 5px 60px 图2-3IE专有的框模型使元素比预期的小 幸运的是,有几个方法可以解决这个问题,这些方法的细节可以在第9章中找到。但是,目前最好的解 决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的填充,而是尝试将填充或空白边添加到元 素的父元素或子元素。 避免地存在一些文字错误,仅供大家学习时参考,请齁买原 起点网络提供webttt.com 26 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd * {margin: 0; padding: 0; } 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加填充、边框和空白边不会影响内容区域 的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 像素的空白边和 5 像素的填充，如果希望这个 框达到 100 像素宽，就需要将内容的宽度设置为 70 像素（见图 2-2）： #myBox { margin: 10px; padding: 5px; width: 70px; } 图 2-2 正确的框模型 填充、边框和空白边可以应用于一个元素的所有边，也可以应用于单独的边。空白边还可以是负值，并 且在多种技术中都要使用负值的空白边。 2.1.1 IE/Win 和框模型 不幸的是，IE 5.x和IE 6 在怪异模式中使用自己的非标准框模型。这些浏览器的width属性不是内容的 宽度，而是内容、填充和边框的宽度总和。这实际上有一定的意义，因为在现实世界中框具有固定的尺寸， 而且填充是放在框里面的。添加的填充越多，给内容留下的空间就越少。尽管符合逻辑，但是这些IE版本不 符合规范，这会造成严重的问题。例如，在前面的示例中，在IE 5.x中框的总宽度只有 90 像素。这是因为IE 5.x认为每个边上 5 像素的填充是 70 像素的宽度的一部分，而不是在宽度之外附加的（见图 2-3）。 图 2-3 IE 专有的框模型使元素比预期的小 幸运的是，有几个方法可以解决这个问题，这些方法的细节可以在第 9 章中找到。但是，目前最好的解 决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的填充，而是尝试将填充或空白边添加到元 素的父元素或子元素。 26
精通CSS:高级WB标准解决方案 第二章可视化格式模型 2.1.2空白边叠加 空白边叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说, 当两个垂直空白边相遇时,它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中 的较大者。 当一个元素出现在另一个元素上面时,第一个元素的底空白边与第二个元素的顶空白边发生叠加(见图 2-4) 叠加之前 叠加之后 内容区域 内容区域 margin-bottom: 30px 空白边叠加形 margin-bottom: 30p 成一个空白边 内容区域 内容区域 图2-4元素的顶空白边与前面元素的底空白边发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将空白边分隔开),它们的顶和/或底空白边也 发生叠加(见图2-5)。 叠加之前 叠加之后 margin-top: opx 空白边叠加形 margin-top: 30px 成一个空白边 margin-top: 20px 内容 内容 图2-5元素的顶空白边与父元素的顶空白边发生叠加 尽管初看上去有点儿奇怪,但是空白边甚至可以与本身发生叠加。假设有一个空元素,它有空白边,但 是没有边框或填充。在这种情况下,顶空白边与底空白边就碰到了一起,它们会发生叠加(见图2-6)。 圣加之前 叠加之后 margin-top: 20px 空白边加形 margin-top: 20p gin-bottome: 20px 成一个空白边 图2-6元素的顶空白边与底空白边发生叠加 如果这个空白边碰到另一个元素的空白边,它还会发生叠加(见图2-7)。 时参考,请购买原 起点网络提供webttt.com 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd 2.1.2 空白边叠加 空白边叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说， 当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度等于两个发生叠加的空白边的高度中 的较大者。 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个元素的顶空白边发生叠加（见图 2-4）。 图 2-4 元素的顶空白边与前面元素的底空白边发生叠加 当一个元素包含在另一个元素中时（假设没有填充或边框将空白边分隔开），它们的顶和/或底空白边也 发生叠加（见图 2-5）。 图 2-5 元素的顶空白边与父元素的顶空白边发生叠加 尽管初看上去有点儿奇怪，但是空白边甚至可以与本身发生叠加。假设有一个空元素，它有空白边，但 是没有边框或填充。在这种情况下，顶空白边与底空白边就碰到了一起，它们会发生叠加（见图 2-6）。 图 2-6 元素的顶空白边与底空白边发生叠加 如果这个空白边碰到另一个元素的空白边，它还会发生叠加（见图 2-7）。 27
精通CSS:高级WB标准解决方案 第二章可视化格式模型 叠加之前 叠加之后 margin-top: 20px margin-top: 20px 所有空白边叠加 形成一个空白边 margin-top: 20px argin-bottom: 20px 图2-7空元素中已经叠加的空白边与另一个空元素的空白边发生叠加 这就是一系列空的段落元素占用的空间非常小的原因,因为它们的所有空白边都叠加到一起,形成一个 小的空白边 空白边叠加初看上去可能有点儿奇怪,但是它实际上是有意义的。以由几个段落组成的典型文本页面为 例(见图2-8)。第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加,后续所有段落之间的 空白边将是相邻顶空白边和底空白边的和。这意味着段落之间的空间是页面顶部的两倍。如果发生空白边叠 加,段落之间的顶空白边和底空白边就叠加在一起,这样各处的距离就一致了 没有空白边叠加 有空白边叠加 落之间的空间是顶 段落之间的空间与 部空间的两倍 顶部空间相同 图2-8空白边叠加在元素之间维护了一致的距离 只有普通文档流中块框的垂直空白边才会发生窄白边叠加。行内框、浮动框或绝对定位框之间的空白边 不会叠加。 22定位概述 既然已经熟悉了框模型,我们就来看看视觉格式化模型和定位模型。理解这两个模型的细微差异是非常 重要的,因为它们一起控制着如何在页面上布置每个元素。 2.2.1视觉格式化模型 p、h或div等元素常常称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反, strong和span等元素称为行内元素,因为它们的内容显示在行中,即“行内框” 可以使用 display属性改变生成的框的类型。这意味着,通过将 display属性设置为 block,可以让行 内元素(比如锚)表现得像块级元素一样。还可以通过将 display属性设置为none,让生成的元素根本没有 框。这样,这个框及其所有内容就不再显示,不占用文档中的空间。 CSS中有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定 位。顾名思义,普通流中元素框的位置由元素在( X HTML中的位置决定 块级框从上到下一个接一个地排列;框之间的垂直距离由框的垂直空白边计算出来。 行内框在一行中水平布置。可以使用水平填充、边框和空白边调整它们的水平间距(见图2-9)。但是, 垂直填充、边框和空白边不影响行内框的高度。由一行形成的水平框称为行框,行框的高度总是足以容纳它 可避免地存在一些文字错误,仅供大家学习时参考,请齁买原书 起点网络提供webttt.com 28 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd 图 2-7 空元素中已经叠加的空白边与另一个空元素的空白边发生叠加 这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有空白边都叠加到一起，形成一个 小的空白边。 空白边叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为 例（见图 2-8）。第一个段落上面的空间等于段落的顶空白边。如果没有空白边叠加，后续所有段落之间的 空白边将是相邻顶空白边和底空白边的和。这意味着段落之间的空间是页面顶部的两倍。如果发生空白边叠 加，段落之间的顶空白边和底空白边就叠加在一起，这样各处的距离就一致了。 图 2-8 空白边叠加在元素之间维护了一致的距离 只有普通文档流中块框的垂直空白边才会发生空白边叠加。行内框、浮动框或绝对定位框之间的空白边 不会叠加。 2.2 定位概述 既然已经熟悉了框模型，我们就来看看视觉格式化模型和定位模型。理解这两个模型的细微差异是非常 重要的，因为它们一起控制着如何在页面上布置每个元素。 2.2.1 视觉格式化模型 p、h1 或 div 等元素常常称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反， strong 和 span 等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。 可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行 内元素（比如锚）表现得像块级元素一样。还可以通过将 display 属性设置为 none，让生成的元素根本没有 框。这样，这个框及其所有内容就不再显示，不占用文档中的空间。 CSS 中有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定 位。顾名思义，普通流中元素框的位置由元素在(X)HTML 中的位置决定。 块级框从上到下一个接一个地排列；框之间的垂直距离由框的垂直空白边计算出来。 行内框在一行中水平布置。可以使用水平填充、边框和空白边调整它们的水平间距（见图 2-9）。但是， 垂直填充、边框和空白边不影响行内框的高度。由一行形成的水平框称为行框，行框的高度总是足以容纳它 28
精通CSS:高级WB标准解决方案 第二章可视化格式模型 包含的所有行内框。但是,设置行高可以增加这个框的高度 空白边 填充 行高 无名行内元素 行框 图2-9一个行框中的行内元素 框可以按照(X)HM元素的嵌套方式包含其他框。大多数框由显式定义的元素形成。但是,在一种情况 下,即使没有进行显式定义,也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素(比如div) 的开头时。即使没有把这些文本定义为段落,它也会被当作段落对待: <div>Some text<p>Some more text</p></div> 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。 块级元素内的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名行 框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方。但是,这有助于理解在屏幕上看到 的所有东西都形成某种框。 2.2.2相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然 后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。如果将top设置为20像素 那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素,那么会在元素左边创建20像 素的空间,也就是将元素向右移动(见图2-10)。 top: 20px position: relative left: 201 position relative 包含元素 图2-10对元素进行相对定位 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他 2.2.3绝对定位 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。与之相 反,绝对定位使元素的位置与文档流无关,因此不占据空间。普通文档流中其他元素的布局就像绝对定位的 元素不存在时一样(见图2-11)。 避免地存在一些文字错误,仅供大家学习时参考,请齁买原 起点网络提供webttt.com 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd 包含的所有行内框。但是，设置行高可以增加这个框的高度。 图 2-9 一个行框中的行内元素 框可以按照(X)HTML 元素的嵌套方式包含其他框。大多数框由显式定义的元素形成。但是，在一种情况 下，即使没有进行显式定义，也会创建块级元素。这种情况发生在将一些文本添加到一个块级元素（比如 div） 的开头时。即使没有把这些文本定义为段落，它也会被当作段落对待： <div>Some text<p>Some more text</p></div> 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。 块级元素内的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名行 框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方。但是，这有助于理解在屏幕上看到 的所有东西都形成某种框。 2.2.2 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然 后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20 像素， 那么框将出现在原位置顶部下面 20 像素的地方。如果将 left 设置为 20 像素，那么会在元素左边创建 20 像 素的空间，也就是将元素向右移动（见图 2-10）。 #myBox{ position:relative; left: 20px; top: 20px; } 图 2-10 对元素进行相对定位 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他 框。 2.2.3 绝对定位 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与之相 反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的 元素不存在时一样（见图 2-11）。 29
精通CSS:高级WB标准解决方案 第二章可视化格式模型 left: 20px 框1 position: absolute 框3 框2 相对定位的先元索 图2-11对元素进行绝对定位 绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素,那么它的位置 相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或HML元素。 与相对定位的框一样,绝对定位的框可以从它的包含块向上、下、左、右移动。这提供了很大的灵活性。 可以直接将元素定位在页面上的任何位置。 对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置,而 绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么是最初的包含块 因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素。可以通过设置z- index属性来 控制这些框的堆放次序。z- index值越高,框在堆中的位置就越高。 绝对定位的元素的位置相对于最近的已定位祖先元素,这使我们能够实现一些非常有意思的效果。例如, 假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位,然后相对于这个框对段落进 行绝对定位: ing width: 700px position: relative *branding. tel position: absolute right: 10px bottom: 10px text-align: right < p class=“tel”>Tel:08458386163</p /div> 在进行页面布局时,绝对定位是非常有用的工具,尤其是在使用相对定位的祖先元素的情况下。完全可 能只使用绝对定位创建出整个设计。为此,这些元素需要具有固定尺寸,这样就能够将它们定位在任何地方 而不会有重叠的风险 因为绝对定位的元素与文档流无关,所以它们不影响普通流中的框。如果扩大绝对定位的框(例如,通 过增加字号),周围的框不会重新定位。因此,尺寸的任何改变会导致绝对定位的框产生重叠,从而破坏精 心调整过的布局。 相对于相对定位的祖先元素对框进行绝对定位,这在大多数现代浏览器中实现得很好。但是,在 Windows 上的IE5.5和IE6中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置, 可避免地存在一些文字错误,仅供大家学习时参考,请齁买原书 起点网络提供webttt.com 30 作者: Andy budd
精通 CSS : 高级 WEB 标准解决方案 第二章 可视化格式模型 本书来源于互联网的一些图片，在转换的过程中，不可避免地存在一些文字错误，仅供大家学习时参考， 请购买原书。 起点网络提供 webttt.com 作者：Andy Budd 图 2-11 对元素进行绝对定位 绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素，那么它的位置 相对于最初的包含块。根据用户代理的不同，最初的包含块可能是画布或HTML元素。 与相对定位的框一样，绝对定位的框可以从它的包含块向上、下、左、右移动。这提供了很大的灵活性。 可以直接将元素定位在页面上的任何位置。 对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档流中的初始位置，而 绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置 z-index 属性来 控制这些框的堆放次序。z-index 值越高，框在堆中的位置就越高。 绝对定位的元素的位置相对于最近的已定位祖先元素，这使我们能够实现一些非常有意思的效果。例如， 假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进 行绝对定位： #branding { width: 700px; height: 100px; position: relative; } #branding .tel { position: absolute; right: 10px; bottom:10px; text-align: right; } <div id=“branding”> <p class=“tel”>Tel:0845 838 6163</p> </div> 在进行页面布局时，绝对定位是非常有用的工具，尤其是在使用相对定位的祖先元素的情况下。完全可 能只使用绝对定位创建出整个设计。为此，这些元素需要具有固定尺寸，这样就能够将它们定位在任何地方 而不会有重叠的风险。 因为绝对定位的元素与文档流无关，所以它们不影响普通流中的框。如果扩大绝对定位的框（例如，通 过增加字号），周围的框不会重新定位。因此，尺寸的任何改变会导致绝对定位的框产生重叠，从而破坏精 心调整过的布局。 相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在Windows 上的IE 5.5 和IE 6 中有一个bug。如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置， 30