当前位置: 代码迷 >> 跨浏览器开发 >> 说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成
  详细解决方案

说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成

热度:9210   发布时间:2013-02-26 00:00:00
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成
关于可视化模型的包含块,已经在“说说标准”系列中跟大家分享过了。

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

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

下面,请大家跟我一起走近W3C标准,看个究竟吧。

一、块级元素和块框
块级元素是源文档中那些在视觉上被格式化为块(如:段落)的元素。某些 'display' 特性的取值会产生块级元素:'block','list-item','run-in'(某些时候是块级元素,参见下文 “run-in”),以及'table'。

块级元素(不包含 table),会形成仅包含块框或仅包含行内框的主块框( principal block box )。主块框会为子孙元素建立包含块,生成内容,并且也是涉及所有定位体系的框。主块框参与block formatting context。

某些块级元素在主块框之外生成额外的框:'list-item'元素。这些额外的框根据原始框来定位。 个人感觉那些额外的框是用来放置标志的,比如,LI 元素前面的点。

匿名行框
例1:
HTML code
<DIV>Some text<P>More text</DIV>
(并假定DIV和P都设置了 'display: block'),DIV 看来包含行内内容和块内容。为了使格式化简单一些,我们假定有一个匿名块框围绕在"Some text"周围。

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

换句话说:如果一个块框(如上例中为DIV生成的框)在其中包含另外一个块框或插入框(如上例中的P),那么,我们强迫它只能包含块框或插入框。因此,上面的 “Some text” 被强制加到一个匿名的块框里面。

当一个行内框包含一个块框(block box)时,这个行内框 (inline box)(和与它处于同一行框内的祖先行内框)会围绕着块框被截断。断点之前和之后的行框(line boxes)会被封闭到匿名的框里,并且,这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时,相对定位也会影响块框。
例2:
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HEAD>    <TITLE>Anonymous text interrupted by a block</TITLE>    <style>       div {           width: 200px;           border: 1px solid gold;       }       span {           border: 1px solid red;       }       p {           width: 100px;           border: 1px solid green;       }    </style></HEAD><BODY>    <div>       <span>This is anonymous text before the P.           <P>This is the content of P.</P>             This is anonymous text after the P.       </span>    </div></BODY>
上述代码中,SPAN 元素包含匿名文本区块 C1,后跟块级元素 P ,最后是匿名文本区块 C2。最后的框(boxes)是围绕 SPAN 的DIV形成的块框,包含 C1 的匿名块框,P 的块框,和另一个包含 C2 的匿名块框。

注意,行框(line box)和行内框(inline box)是两个不同的概念,后续会说到行框(line box)。

匿名框的特性(properties)从包含它的非匿名框那里继承而来(比如,例1中,匿名框会继承包含它的 DIV 特性)。给继承特性会使用初始值。比如,字体,匿名框会从DIV继承,但是margin值会是 0 。

匿名框不会影响元素的原有特性设置。如例2中 SPAN 设置了 border,产生匿名框后,C1 C2还是被红色的边框包围。

注意,块框会占据一整行。

二、行内级别元素和行内框

行内元素是源文档中那些不形成新的内容块的元素;内容在行内分布(如,段落内着重的文本,行内图形等等)。某些'display'特性的值形成行内元素:'inline','inline-table','run-in'(某些时候;参见下文 “run-in”)。行内级别元素生成行内框。
 
匿名行内框

例1:
HTML code
<P>Some <EM>emphasized</em> text</P>
P元素生成一个块控制框,其内还有几个行内框。"emphasized"的框是一个行内元素(<em>)产生的行内框,而其它的框("Some"和"text")是块级元素(P)产生的行内框。后者就称为匿名行内控制框,因为它们没有与之相关的行内元素,所以,这些框被叫做匿名行内框。

这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。例子中,初始匿名框的颜色继承自P,而背景是透明的。

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

匿名行内框和匿名块框可以被统称为匿名框。

在格式化 table 时,会形成更多的匿名框。

三、插入框

插入框的表现如下
1. 如果插入框包含一个块框,那么插入框会成为一个块框;
2. 如果一个块框(不是浮动,也不是绝对定位)跟随在一个插入的控制框之后,则该插入框成为该块框的第一个行内框。
3. 否则,该插入框成为一个块框。

一个'run-in'框在插入标题时很有用,如下例:
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD><TITLE>A run-in box example</TITLE>    <STYLE type="text/css">        H3 {            display: run-in        }    </STYLE></HEAD><BODY><H3>A run-in heading.</H3><P>And a paragraph of text that follows it.</BODY></HTML>
  相关解决方案
本站暂不开放注册!
内测阶段只得通过邀请码进行注册!