好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_h

原文:http://HdhCmsTestw3.org/TR/CSS2/visudet.html

译者注:本文未全文翻译(最近要校招找工作,所以学习压力大,先挑重头,所以暂省略了最大最小宽度高度两部分)。文中部分内容和配图是我自己的理解,但没有一一标注。此外,文中有许多术语,我都有在后面注明原英文。最后要吐槽以下,vertical-align 属性在各浏览器中的兼容性真是跪了,如果读者有了解这个兼容性问题,请务必留言解惑!之后我也会抽空解决这个属性问题哒!

10.1 “包含块”的定义

元素的盒的位置和大小有时会根据某一矩形来计算,该矩形被称为该元素的包含块。一个元素的包含块定义如下:

根元素所在的包含块是一个被称为初始包含块 Initial Containing Block 的矩形,在连续媒体中,其尺寸为视口大小,其基点为画布原点。在分页媒体中,初始包含块即为页面区域 Page Area。初始包含块的 direction 属性与根元素的一致。

对于其他元素而言,如果元素 position 为 relative 或 static,其包含块为最近的块容器祖先盒的内容边缘。

如果元素有 position: fixed,其包含块由连续媒体中的视口或分页媒体中的页面区域创建。

如果元素有 position: absolute,在以下情况下,其包含块由 position 值为 absolute,relative,fixed 的最近祖先创建:

如果该祖先元素为行内元素,包含块即围绕着为该元素生成的第一个和最后一个行内盒的内边距盒的边界盒。在CSS2.1中,如果该行内元素分跨多行,则包含块未定义。

否则,包含块由该祖先元素的内边距边缘构成。

如果没有这样的祖先元素,包含块即初始包含块。

在分页媒体中,一个绝对定位元素相对于其包含块定位,并忽略所有的换页(如同文档是连续的)。该元素可能随后被打断而分布在几个页面之中。

对于绝对定位内容,如果解析为页面上的一个位置而不是正在布局的页面(当前页面),或解析为已经为打印而渲染出来的当前页面的一个位置,打印机可能将该内容放置于:

当前页的其他位置

下一页,或者

省略该内容

注意:一个分布在多页的块级元素在每页的宽度可能不同,并且可能会存在设备特定限制。

在没有定位的情况下,下面文档:

        Illustration of containing blocks     

This is text in the first paragraph...

This is text in the second paragraph.

查看更多关于CSS规范>10视觉格式化模型详述VisualFormattingModelDetails_h的详细内容...

  阅读:37次