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

资源描述

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

《说说标准系列文章2css可视化模型1.docx》由会员分享，可在线阅读，更多相关《说说标准系列文章2css可视化模型1.docx（40页珍藏版）》请在冰豆网上搜索。

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

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

说说标准——CSS中非常重要的可视化格式模型（visualformattingmodel）

0、简介

从今天开始，我会跟大家分享CSS非常重要的可视化格式模型，那这个概念到底有多重要呢？

盒子模型是CSS中所有元素产生的box的自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。

换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等。

属于CSS的最为核心的概念之一。

可视化格式模型的概念非常多，我会分多次说明，我也会在我的能力范围内，尽量说的很细，力求通俗易懂。

如果大家有哪里不懂的，请说明，大家一起讨论。

thx！

这部分章节都是很理论性的东西，我尽量会多举例子，以达到直观的效果。

今天，只简单介绍一下其概念和涉及到的内容。

目的是起一个提纲挈领的作用。

可视化格式模型，官方的说法是，它规定了用户端在媒介中如何处理文档树（documenttree）。

●用户端，对我们来说一般指浏览器。

●媒介，相当于我们展现页面的介质。

如，纸媒介，听觉浏览器和显示器等。

感兴趣的可以看一下CSS2.1的第7章：

http:

//www.w3.org/TR/CSS2/media.html

●文档树（documenttree）是指源文档中元素树的编码。

树中，每一个元素恰好由一个父元素。

根元素是例外，它没有父元素。

就是document和页面上的元素所构成的类似树形的结构。

在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局受一下因素的影响：

●1.box尺寸和类型

░░♦类型是指display特性所决定的元素类型，如：

DIV是块级元素，SPAN是行内元素等

●2.定位体系

░░♦元素在布局时，根据3种定位体系定位。

分别是，常规流、浮动和绝对定位。

这3种定位体系的详细内容会在后面讲到。

●3.在文档树中，元素之间的关系。

░░♦比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块的影响。

●4.外部信息。

░░♦比如，可视窗口的大小，我们有时候会做页面自适应窗口大小的功能，就是因为，窗口大小对布局有影响。

再如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响这个布局。

这部分定义的特性，适用于continuousmedia和pagedmedia。

当作用于pagedmedia时，margin的意义有所改变。

可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。

用户端的一致性（Conforminguseragents）在处理本规范未包含的格式化情形时，表现可能有所不同。

在这部分，会涉及到很多新的概念，包含块，元素的类型，定位体系，块级格式化上下文，行内格式化上下文，浮动，绝对定位，z-index，以及，可视化格式模型的细节部分，自动宽度高度的计算。

还有两个概念需要说明。

视口（viewport）

视口，即可视窗口。

当可视窗口的尺寸大小改变时，浏览器应该改变文档的布局。

比如，有些值是依赖于可视窗口的大小的，DIVwidth的auto值，等等。

当可视窗口的尺寸小于文档渲染的画布（也就是页面）的大小时，浏览器应该提供滚动机制。

每个画布最多有一个可视窗口。

但是，浏览器可以同时渲染多个画布。

也就是说，浏览器可以打开多个页面，但是每个页面最多只有一个可视窗口。

包含块（containingblock）简介

在CSS2.1中，很多box的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，就被称作是包含块（containingblock）。

一般来说，（元素）生成的box会扮演它子孙元素包含块的角色；我们称之为：

一个（元素的）box为它的子孙节点建造了包含块。

包含块是一个相对的概念。

比如：

HTMLcode

以上面的代码做例子，DIV和TABLE都是包含块。

DIV是TABLE的包含块，同时TABLE又是TD的包含块，不是绝对的。

“一个box的包含块”，指的是“该box所存在的那个包含块”，并不是它建造的包含块。

比如，上述代码中，TABLE的包含块，说的是DIV建造的包含块，而不是TABLE自身建造的包含块。

TABLE建造的包含块，可以称作TD的包含块。

每个box关于它的包含块都有一个位置，但是它不会被包含块限制；它可以溢出（包含块）。

包含块上可以通过设置overflow特性达到处理溢出的子孙元素的目的。

HTMLcode

100px;heigh:

100px;border:

1pxsolidred;">

200px;heigh:

200px;background-color:

gold;">hello

如上代码中，A是B的包含块，B的定位跟A有关，B的大小大于A的大小，这时候，B会溢出，而A不能限制B的大小。

包含块的概念很重要，因为可视化格式模型中很多的理论性知识都跟这个概念有关系，比如，宽度高度自动值的计算，浮动元素的定位，绝对定位元素的定位等等。

关于更加细节的东西，会在以后的帖子中详细介绍，敬请期待……

上个帖子中对可视化格式模型做了一个概述，并简单的介绍了一下包含块的概念，在这里：

【分享】说说标准--CSS中非常重要的可视化格式模型（visualformattingmodel）简介。

上回贴说到，一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。

而元素会为它的子孙元素创建包含块，那么，是不是说，元素的包含块就是它的父元素呢？

一个元素包含块的确定，跟元素自身和它的祖先元素的样式等有关系。

根元素存在的包含块，被叫做初始包含块（initialcontainingblock）。

●在（X）HTML中，根元素是html元素（尽管有的浏览器会不正确地使用body元素）。

如果该元素的定位（position）为“relative”（相对定位）或者“static”（静态定位），它的包含块由它最近的块级、单元格（tablecell）或者行内块（inline-block）祖先元素的内容框创建。

元素如果未声明“position”特性，那么就会采用“position”的默认值”static”。

SPAN元素中包含的文本在div1中的位置可以看出，div1创建的包含块的区域是它的内容边界，也就是内边界。

absolute”）元素，包含块由离它最近的position属性为“absolute”、“relative”或者“fixed”的祖先元素创建。

1.如果其祖先元素是行内元素，则包含块取决于其祖先元素的“direction”特性

●如果'direction'是'ltr'，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界（paddingedges），右、下边是祖先元素生成的最后一个框的右、下内边距边界（paddingedges）。

这段文字从左向右排列，红XX和蓝XX和黄XX都是绝对定位元素，它的包含块是相对定位的SPAN。

红XX和蓝XX和黄XX都是绝对定位元素，它的包含块是相对定位的SPAN。

它们定位需要参照包含块，按照标准来说，它们包含块的左顶边是SPAN形成的第一个框（即第一行的灰色部分）的顶、左内边距边，包含块的右、下边是SPAN生成的最后一个框（最后一行灰色的部分）的右、下内边距边界。

行内元素内形成的包含块，在各浏览器中各不相同，存在兼容性问题。

这段文字从左向右排列，红XX和蓝XX和黄XX都是绝对定位元素，它的包含块是相对定位的SPAN。

●如果'direction'是'rtl'，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界（paddingedges），左、下边是祖先元素生成的最后一个框的左、下内边距边界（paddingedges）。

这段文字从右向左排列，红XX和蓝XX和黄XX都是绝对定位元素，它的包含块是相对定位的SPAN。

2.其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界。

如上代码中，content的父元素虽是div1，但，按照标准它的包含块应该是container。

如果不存在这样的祖先元素，那么它的包含块就是初始包含块。

这个概念比较复杂，但最重要的是弄清楚，包含块是由哪个祖先元素创建的，以及创建的包含块区域。

关于可视化模型的包含块，已经在“说说标准”系列中跟大家分享过了。

这次，跟大家分享另一个比较重要的概念，这个概念也许大家会很熟悉，因为经常挂在嘴边，这就是，块元素和块框，行内元素和行框，以及display特性等。

我们经常用到块元素、行内元素的概念，那么，到底什么是块元素，什么是行内元素，它们有什么特点，怎么形成的，有什么作用呢？

'block'，'list-item'，'run-in'（某些时候是块级元素，参见下文“run-in”），以及'table'。

块级元素（不包含table），会形成仅包含块框或仅包含行内框的主块框（principalblockbox）。

主块框会为子孙元素建立包含块，生成内容，并且也是涉及所有定位体系的框。

个人感觉那些额外的框是用来放置标志的，比如，LI元素前面的点。

为了使格式化简单一些，我们假定有一个匿名块框围绕在"Sometext"周围。

来自W3C，上面的图中有3个框，div的box，P的box，以及包含“Sometext”的匿名块框。

如果一个块框（如上例中为DIV生成的框）在其中包含另外一个块框或插入框（如上例中的P），那么，我们强迫它只能包含块框或插入框。

当一个行内框包含一个块框（blockbox）时，这个行内框（inlinebox）（和与它处于同一行框内的祖先行内框）会围绕着块框被截断。

断点之前和之后的行框（lineboxes）会被封闭到匿名的框里，并且，这个块框会成为这些匿名框的兄弟框。

当这样的行内框受到相对定位的影响时，相对定位也会影响块框。

上述代码中，SPAN元素包含匿名文本区块C1，后跟块级元素P，最后是匿名文本区块C2。

最后的框（boxes）是围绕SPAN的DIV形成的块框，包含C1的匿名块框，P的块框，和另一个包含C2的匿名块框。

注意，行框（linebox）和行内框（inlinebox）是两个不同的概念，后续会说到行框（linebox）。

匿名框的特性（properties）从包含它的非匿名框那里继承而来（比如，例1中，匿名框会继承包含它的DIV特性）。

如例2中SPAN设置了border，产生匿名框后，C1C2还是被红色的边框包围。

行内元素是源文档中那些不形成新的内容块的元素；内容在行内分布（如，段落内着重的文本，行内图形等等）。

'inline'，'inline-table'，'run-in'（某些时候；参见下文“run-in”）。

"emphasized"的框是一个行内元素（）产生的行内框，而其它的框（"Some"和"text"）是块级元素（P）产生的行内框。

后者就称为匿名行内控制框，因为它们没有与之相关的行内元素，所以，这些框被叫做匿名行内框。

空格内容会根据'white-space'特性被压缩，不会创建任何匿名行内框。

2.如果一个块框（不是浮动，也不是绝对定位）跟随在一个插入的控制框之后，则该插入框成为该块框的第一个行内框。

Arun-inheading.

尽管，从视觉看，它成为块框的一部分，插入元素的特性仍然继承自源树中它的父元素。