【分享】说说标准——CSS中非常重要的可视化格式模型(visual formatting model)简介

WebAdvocate 2010-07-19 05:10:21
加精
从今天开始,我会跟大家分享CSS非常重要的可视化格式模型,那这个概念到底有多重要呢?盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局。换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等。属于CSS的最为核心的概念之一。
可视化格式模型的概念非常多,我会分多次说明,我也会在我的能力范围内,尽量说的很细,力求通俗易懂。如果大家有哪里不懂的,请说明,大家一起讨论。thx!
这部分章节都是很理论性的东西,我尽量会多举例子,以达到直观的效果。

今天,只简单介绍一下其概念和涉及到的内容。目的是起一个提纲挈领的作用。
可视化格式模型,官方的说法是,它规定了用户端在媒介中如何处理文档树(document tree)。
用户端,对我们来说一般指浏览器。
媒介,相当于我们展现页面的介质。如,纸媒介,听觉浏览器和显示器等。感兴趣的可以看一下CSS2.1 的第7章:http://www.w3.org/TR/CSS2/media.html
文档树(document tree)是指源文档中元素树的编码。树中,每一个元素恰好由一个父元素。根元素是例外,它没有父元素。就是document和页面上的元素所构成的类似树形的结构。

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

这部分定义的特性,适用于 continuous media paged media。当作用于 paged media时,margin的意义有所改变。

可视化格式模型,不会规定所有格式的细节(比如,它并不是指字间距)。用户端的一致性( Conforming user agents )在处理本规范未包含的格式化情形时,表现可能有所不同。

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

还有两个概念需要说明。

视口(viewport)

视口,即可视窗口。当可视窗口的尺寸大小改变时,浏览器应该改变文档的布局。比如,有些值是依赖于可视窗口的大小的,DIV width的auto值,等等。

当可视窗口的尺寸小于文档渲染的画布(也就是页面)的大小时,浏览器应该提供滚动机制。每个画布最多有一个可视窗口。但是,浏览器可以同时渲染多个画布。也就是说,浏览器可以打开多个页面,但是每个页面最多只有一个可视窗口。

包含块(containing block)简介

在CSS2.1中,很多box的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,就被称作是包含块(containing block)。一般来说,(元素)生成的box会扮演它子孙元素包含块的角色;我们称之为:一个(元素的)box为它的子孙节点建造了包含块。包含块是一个相对的概念。
比如:
<div>
<table>
<tr><td>hi</td></tr>
</table>
</div>
以上面的代码做例子,DIV 和 TABLE 都是包含块。DIV 是 TABLE 的包含块,同时TABLE又是 TD 的包含块,不是绝对的。
“一个box的包含块”,指的是“该box所存在的那个包含块”,并不是它建造的包含块。比如,上述代码中,TABLE 的包含块,说的是 DIV 建造的包含块,而不是TABLE自身建造的包含块。TABLE 建造的包含块,可以称作 TD 的包含块。

每个box关于它的包含块都有一个位置,但是它不会被包含块限制;它可以溢出(包含块)。包含块上可以通过设置 overflow 特性达到处理溢出的子孙元素的目的。
<div id=”A” style="width:100px; heigh:100px; border:1px solid red;">
<div id=“B” style="width:200px; heigh:200px; background-color:gold;">hello</div>
</div>
如上代码中,A 是 B的包含块,B 的定位跟 A 有关,B的大小大于A的大小,这时候,B 会溢出,而 A 不能限制 B 的大小。
注意,这段代码是有兼容性问题的,见:【分享】小心,IE中 width/height的设定值可能被其内容撑大

包含块的概念很重要,因为可视化格式模型中很多的理论性知识都跟这个概念有关系,比如,宽度高度自动值的计算,浮动元素的定位,绝对定位元素的定位等等。不了解包含块,就掌握不好以它为基础的后续理论。

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

详细资料见 W3C CSS2.1标准:
http://www.w3.org/TR/CSS2/visuren.html#visual-model-intro

可视化格式模型小节题目:

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之一:包含块(containing block)

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之三:定位体系概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之四:常规流中的Block formatting context
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之五:常规流中的inline formatting context
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之六:常规流中的相对定位
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之七:浮动(Float)概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十:控制紧接浮动的排列-clear 特性

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十一:绝对定位


更多说说标准系列帖子:
【分享】说说标准系列目录
...全文
7996 73 打赏 收藏 举报
写回复
73 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
younhappy 2010-08-18
mark,但语言整的太复杂了,那么简单的东西说的一头雾水。个人感觉。
  • 打赏
  • 举报
回复
huangbaohua 2010-08-17
学习学习了
  • 打赏
  • 举报
回复
misquest 2010-08-17
挺有用的
  • 打赏
  • 举报
回复
Viweei 2010-08-12
楼主给个打包下载回来看的嘛。。。
  • 打赏
  • 举报
回复
dingjian36311261 2010-08-11
支持楼主

  • 打赏
  • 举报
回复
lcrlb1988 2010-08-10
站位……留待以后学习

不考虑美工的程序员不是好的项目经理
  • 打赏
  • 举报
回复
fuzhenming521 2010-08-04
好贴。。。。。。
  • 打赏
  • 举报
回复
WebAdvocate 2010-08-04
已更新……
  • 打赏
  • 举报
回复
yyil80 2010-07-29
先收藏了,谢谢分享
  • 打赏
  • 举报
回复
sky_Great 2010-07-28
厉害 好文章
  • 打赏
  • 举报
回复
dvlinker 2010-07-26
好文章,得支持一个~
  • 打赏
  • 举报
回复
netliqiang520 2010-07-26
学习了!!!.

  • 打赏
  • 举报
回复
a342288073 2010-07-26
学习学习
  • 打赏
  • 举报
回复
blueidea_liu 2010-07-26
css的很多地方需要研究
特别是不同浏览器的支持不同
  • 打赏
  • 举报
回复
老笨妞 2010-07-25
我们的工作经常用到啊!学习学习!
  • 打赏
  • 举报
回复
黄金蛇 2010-07-25
感谢LZ分享
  • 打赏
  • 举报
回复
wang1984hua 2010-07-25
每天回帖即可获得10分可用分!
  • 打赏
  • 举报
回复
Abin-2008 2010-07-24
为什么都是你的帖子推荐呢???
  • 打赏
  • 举报
回复
lsy51213 2010-07-24
恩,学习学习!
  • 打赏
  • 举报
回复
l888c 2010-07-24
关注中..
  • 打赏
  • 举报
回复
加载更多回复
相关推荐
发帖
跨浏览器开发
加入

5005

社区成员

解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
申请成为版主
帖子事件
创建了帖子
2010-07-19 05:10
社区公告
暂无公告