说说标准系列文章2css可视化模型1.docx

1、说说标准系列文章2css可视化模型1说说标准CSS中非常重要的可视化格式模型(visual formatting model)0、简介从今天开始，我会跟大家分享CSS非常重要的可视化格式模型，那这个概念到底有多重要呢？盒子模型是CSS中所有元素产生的box的自身构成，而可视化格 式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放 box，box相互作用等等。属于CSS的最为核心的概念之一。可视化格式模型的概念非常多，我会分多次说明，我也会在我的能力范围内，尽量说的很细，力求通俗易懂。如果大家有哪里不懂的，

2、请说明，大家一起讨论。thx！这部分章节都是很理论性的东西，我尽量会多举例子，以达到直观的效果。今天，只简单介绍一下其概念和涉及到的内容。目的是起一个提纲挈领的作用。可视化格式模型，官方的说法是，它规定了用户端在媒介中如何处理文档树(document tree)。 用户端，对我们来说一般指浏览器。 媒介，相当于我们展现页面的介质。如，纸媒介，听觉浏览器和显示器等。感兴趣的可以看一下CSS2.1 的第7章：http:/www.w3.org/TR/CSS2/media.html 文档树(document tree)是指源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元

3、素。就是document和页面上的元素所构成的类似树形的结构。在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局受一下因素的影响： 1. box尺寸和类型 类型是指 display 特性所决定的元素类型，如：DIV 是块级元素，SPAN 是行内元素等 2. 定位体系 元素在布局时，根据3种定位体系定位。分别是，常规流、浮动和绝对定位。这3种定位体系的详细内容会在后面讲到。 3. 在文档树中，元素之间的关系。 比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块的影响。 4. 外部信息。 比如，可视窗口的大小，我们有

4、时候会做页面自适应窗口大小的功能，就是因为，窗口大小对布局有影响。再如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响这个布局。这部分定义的特性，适用于 continuous media 和 paged media。当作用于 paged media时，margin的意义有所改变。可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。用户端的一致性（ Conforming user agents ）在处理本规范未包含的格式化情形时，表现可能有所不同。在这部分，会涉及到很多新的概念，包含块，元素的类型，定位体系，块级格式化上下文，行内格式化上下文，浮动，绝对定位，z-index，以

5、及，可视化格式模型的细节部分，自动宽度高度的计算。还有两个概念需要说明。视口（viewport）视口，即可视窗口。当可视窗口的尺寸大小改变时，浏览器应该改变文档的布局。比如，有些值是依赖于可视窗口的大小的，DIV width的auto值，等等。当可视窗口的尺寸小于文档渲染的画布（也就是页面）的大小时，浏览器应该提供滚动机制。每个画布最多有一个可视窗口。但是，浏览器可以同时渲染多个画布。也就是说，浏览器可以打开多个页面，但是每个页面最多只有一个可视窗口。包含块(containing block)简介在 CSS2.1中，很多box的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，就被称作是包含

6、块(containing block)。一般来说，(元素)生成的box会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)box为它的子孙节点建造了包含块。包含块是一 个相对的概念。比如：HTML codehi以上面的代码做例子，DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块，同时TABLE又是 TD 的包含块，不是绝对的。“一个box的包含块”，指的是“该box所存在的那个包含块”，并不是它建造的包含块。比如，上述代码中，TABLE 的包含块，说的是 DIV 建造的包含块，而不是TABLE自身建造的包含块。TABLE 建造的包含块，可以称作 TD 的包含块。每个bo

7、x关于它的包含块都有一个位置，但是它不会被包含块限制；它可以溢出(包含块)。包含块上可以通过设置 overflow 特性达到处理溢出的子孙元素的目的。HTML code hello如上代码中，A 是 B的包含块，B 的定位跟 A 有关，B的大小大于A的大小，这时候，B 会溢出，而 A 不能限制 B 的大小。注意，这段代码是有兼容性问题的，见：【分享】小心，IE中 width/height的设定值可能被其内容撑大包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。不了解包含块，就掌握不好以它为基础的后续理

8、论。关于更加细节的东西，会在以后的帖子中详细介绍，敬请期待一：包含块(containing block)上个帖子中对可视化格式模型做了一个概述，并简单的介绍了一下包含块的概念，在这里：【分享】说说标准 -CSS中非常重要的可视化格式模型(visual formatting model)简介 。这个帖子会就包含块的细节给出详细的讲解。上回贴说到，一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。而元素会为它的子孙元素创建包含块，那么，是不是说，元素的包含块就是它的父元素呢？答案是否定的，这是一个误区。也正因为如此，才会有专门的一帖来说明它。一个元素包含块的确

9、定，跟元素自身和它的祖先元素的样式等有关系。根元素的包含块根元素，就是处于文档树最顶端的元素，它没有父节点。根元素存在的包含块，被叫做初始包含块 (initial containing block)。具体，跟用户端有关。 在(X)HTML中，根元素是html元 素（尽管有的浏览器会不正确地使用body元 素）。 而初始包含块的direction属性与根元素相同。“static”和”relative”定位的元素对于其它元素：如果该元素的定位（position）为 “relative” （相对定位）或者 “static”（静态定位），它的包含块由它最近的块级、单元格 （table cell）或者行

10、内块（inline-block）祖先元素的内容框创建。关于内容框，见：【分享】说说标准 你真的了解盒子模型(box model)吗？元素如果未声明 “position” 特性 ，那么就会采用 “position” 的默认值 ”static”。所以，一般元素都是静态定位的。比如：HTML code greed is good 999999 其中， 以上代码中，元素包含块表为：SPAN元素中包含的文本在div1中的位置可以看出，div1创建的包含块的区域是它的内容边界，也就是内边界。“position:fixed” 定位的元素如果元素是固定定位 (“position:fixed”) 元素，那么它的

11、包含块是当前可视窗口。position: absolute 定位的元素如果元素是绝对定位（”position: absolute”）元素，包含块由离它最近的 position 属性为 “absolute”、“relative” 或者 “fixed” 的祖先元素创建。1. 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 “direction” 特性 如果 direction 是 ltr，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges) 。例如：HTML code T

12、 这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 XX XX XX 以上代码中，文字采取默认从左到右的方式排列。红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。它们定位需要参照包含块，按照标准来说，它们包含块的左顶边是 SPAN形成的第一个框（即第一行的灰色部分）的顶、左内边距边，包含块的右、下边是SPAN 生成的最后一个框（最后一行灰色的部分）的右、下内边距边界。图示：行内元素内形成的包含块，在各浏览器中各不相同，存在兼容性问题。可以通过上面

13、的例子可以证明这一点。蓝色的 “XX”的位置在各浏览器中都不一样。你可以打开浏览器试一下。当行框是这样的时候，比较纠结：HTML code TEXT TEXT TEXT 这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 XX XX XX 包含块区域：这时，会造成包含块的宽度为负。这时，绝对定位元素定位起来，肯定也很纠结。 如果 direction 是 rtl，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界(padding edges) ，左、下边是祖先元素生成的最后一个框

14、的左、下内边距边界(padding edges) 。例如：HTML code T 这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们 XX XX XX 以上的包含块范围：2. 其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。例如：HTML code absolute element 如上代码中，content的父元素虽是 div1，但，按照标准它的包含块应该是 container。如果不存在这样的祖先元素，那么它的包含块就是初始包含块。流程图W3C 官方例子HTML

15、 code Illustration of containing blocks This is text in the first paragraph. This is text in the second paragraph. 元素包含块表为：这个概念比较复杂，但最重要的是弄清楚，包含块是由哪个祖先元素创建的，以及创建的包含块区域。二：控制框(Controlling Box)的形成关于可视化模型的包含块，已经在“说说标准”系列中跟大家分享过了。这次，跟大家分享另一个比较重要的概念，这个概念也许大家会很熟悉，因为经常挂在嘴边，这就是，块元素和块框，行内元素和行框，以及 display 特性等。

16、我们经常用到块元素、行内元素的概念，那么，到底什么是块元素，什么是行内元素，它们有什么特点，怎么形成的，有什么作用呢？什么是块框，什么又是行内框呢？下面，请大家跟我一起走近W3C标准，看个究竟吧。一、块级元素和块框块级元素是源文档中那些在视觉上被格式化为块（如：段落）的元素。某些 display 特性的取值会产生块级元素：block，list-item，run-in（某些时候是块级元素，参见下文 “run-in”），以及table。块级元素（不包含 table），会形成仅包含块框或仅包含行内框的主块框( principal block box )。主块框会为子孙元素建立包含块，生成内容，并且也

17、是涉及所有定位体系的框。主块框参与block formatting context。某些块级元素在主块框之外生成额外的框：list-item元素。这些额外的框根据原始框来定位。 个人感觉那些额外的框是用来放置标志的，比如，LI 元素前面的点。匿名行框例1：HTML codeSome textMore text（并假定DIV和P都设置了 display: block），DIV 看来包含行内内容和块内容。为了使格式化简单一些，我们假定有一个匿名块框围绕在Some text周围。来自W3C，上面的图中有 3 个框，div 的 box，P 的 box，以及包含 “Some text” 的匿名块框。换句

18、话说：如果一个块框（如上例中为DIV生成的框）在其中包含另外一个块框或插入框（如上例中的P），那么，我们强迫它只能包含块框或插入框。因此，上面的 “Some text” 被强制加到一个匿名的块框里面。当一个行内框包含一个块框(block box)时，这个行内框 (inline box)（和与它处于同一行框内的祖先行内框）会围绕着块框被截断。断点之前和之后的行框(line boxes)会被封闭到匿名的框里，并且，这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时，相对定位也会影响块框。例2：HTML code Anonymous text interrupted by a bl

19、ock div width: 200px; border: 1px solid gold; span border: 1px solid red; p width: 100px; border: 1px solid green; This is anonymous text before the P. This is the content of P. This is anonymous text after the P. 上述代码中，SPAN 元素包含匿名文本区块 C1，后跟块级元素 P ，最后是匿名文本区块 C2。最后的框(boxes)是围绕 SPAN 的DIV形成的块框，包含 C1 的匿

20、名块框，P 的块框，和另一个包含 C2 的匿名块框。注意，行框(line box)和行内框(inline box)是两个不同的概念，后续会说到行框(line box)。匿名框的特性(properties)从包含它的非匿名框那里继承而来（比如，例1中，匿名框会继承包含它的 DIV 特性）。给继承特性会使用初始值。比如，字体，匿名框会从DIV继承，但是margin值会是 0 。匿名框不会影响元素的原有特性设置。如例2中 SPAN 设置了 border，产生匿名框后，C1 C2还是被红色的边框包围。注意，块框会占据一整行。二、行内级别元素和行内框行 内元素是源文档中那些不形成新的内容块的元素；内容在

21、行内分布（如，段落内着重的文本，行内图形等等）。某些display特性的值形成行内元 素：inline，inline-table，run-in（某些时候；参见下文 “run-in”）。行内级别元素生成行内框。匿名行内框例1：HTML codeSome emphasized textP元素生成一个块控制框，其内还有几个行内框。emphasized的框是一个行内元素（）产 生的行内框，而其它的框（Some和text）是块级元素（P）产生的行内框。后者就称为匿名行内控制框，因为它们没有与之相关的行内元素，所 以，这些框被叫做匿名行内框。这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的

22、初始值。例子中，初始匿名框的颜色继承自P，而背景是透明的。空格内容会根据 white-space 特性被压缩，不会创建任何匿名行内框。匿名行内框和匿名块框可以被统称为匿名框。在格式化 table 时，会形成更多的匿名框。三、插入框插入框的表现如下：1. 如果插入框包含一个块框，那么插入框会成为一个块框；2. 如果一个块框（不是浮动，也不是绝对定位）跟随在一个插入的控制框之后，则该插入框成为该块框的第一个行内框。3. 否则，该插入框成为一个块框。一个run-in框在插入标题时很有用，如下例：HTML codeA run-in box example H3 display: run-in A ru

23、n-in heading.And a paragraph of text that follows it.本例可能被格式化为：A run-in heading. And aparagraph of text thatfollows it.尽管，从视觉看，它成为块框的一部分，插入元素的特性仍然继承自源树中它的父元素。注意，Firefox至今仍不支持 run-in：https:/developer.mozilla.org/en/CSS/display。四、display 特性display特性值： inline | block | list-item | run-in | compact | marker |table | inline-table | table-row-group | table-header-group |table-footer-group | table-row | table