关于可视化模型的包含块，已经在“
说说标准
”系列中跟大家分享过了。
这次，跟大家分享另一个比较重要的概念，这个概念也许大家会很熟悉，因为经常挂在嘴边，这就是，块元素和块框，行内元素和行框，以及 display 特性等。
我们经常用到块元素、行内元素的概念，那么，到底什么是块元素，什么是行内元素，它们有什么特点，怎么形成的，有什么作用呢？什么是块框，什么又是行内框呢？
下面，请大家跟我一起走近W3C标准，看个究竟吧。
一、块级元素和块框
块级元素是源文档中那些在视觉上被格式化为块（如：段落）的元素。某些 'display' 特性的取值会产生块级元素：'block'，'list-item'，'run-in'（某些时候是块级元素，参见下文 “run-in”），以及'table'。
块级元素（不包含 table），会形成仅包含块框或仅包含行内框的主块框( principal block box )。主块框会为子孙元素建立包含块，生成内容，并且也是涉及所有定位体系的框。主块框参与 block formatting context 。
某些块级元素在主块框之外生成额外的框：'list-item'元素。这些额外的框根据原始框来定位。 个人感觉那些额外的框是用来放置标志的，比如，LI 元素前面的点。
匿名行框
例1：
来自W3C，上面的图中有 3 个框，div 的 box，P 的 box，以及包含 “Some text” 的匿名块框。
换句话说：如果一个块框（如上例中为DIV生成的框）在其中包含另外一个块框或插入框（如上例中的P），那么，我们强迫它只能包含块框或插入框。因此，上面的 “Some text” 被强制加到一个匿名的块框里面。
当一个行内框包含一个块框(block box)时，这个行内框 (inline box)（和与它处于同一行框内的祖先行内框）会围绕着块框被截断。断点之前和之后的 行框(line boxes) 会被封闭到匿名的框里，并且，这个块框会成为这些匿名框的兄弟框。当这样的行内框受到相对定位的影响时，相对定位也会影响块框。
例2：
注意， 行框(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：
这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。例子中，初始匿名框的颜色继承自P，而背景是透明的。
空格内容会根据 'white-space' 特性被压缩，不会创建任何匿名行内框。
匿名行内框和匿名块框可以被统称为匿名框。
在格式化 table 时，会形成更多的匿名框。
三、插入框
插入框的表现如下 ：
1. 如果插入框包含一个块框，那么插入框会成为一个块框；
2. 如果一个块框（不是浮动，也不是绝对定位）跟随在一个插入的控制框之后，则该插入框成为该块框的第一个行内框。
3. 否则，该插入框成为一个块框。
一个'run-in'框在插入标题时很有用，如下例：
A run-in heading. And a
paragraph of text that
follows 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-column-group | table-column |table-cell | table-caption | none | inherit
初始值 ： inline
适用于 ： 所有元素
可否继承 ： 否
百分比 ： N/A
媒介 ： 所有
block
该值使一个元素生成一个块框。
inline-block
该值使一个元素生成一个块框，自身在文档流中像一个行内元素，跟替换元素相似。元素的内部按照块框格式化，自身按照一个行内替换元素格式化。
inline
该值使一个元素生成一个或多个行内框。
list-item
该值使一个元素（如HTML中的LI）生成一个原始块框和一个列表项行内框。要了解列表和列表格式化的信息，请参见列表一节。
none
该值使一个元素在格式化结构中不显示（换言之，该元素对布局没有影响）。子孙元素也不产生任何框；该行为不能由设置子孙元素的 'display' 属性而被覆盖。
请注意 'none' 的显示特性并不生成一个不可见的框；它根本不生成框。CSS包含了机制使一个元素能够在格式化结构中生成框而影响格式化，但本身不可见( visible 特性)。
run-in
根据上下文，这些值要么生成块框，要么生成行内框。对于插入和压缩框适用的属性基于它们最终的状态（行内或块类）。
注意，尽管'display'的初始值是 'inline'，用户端（对我们来说是浏览器）的缺省样式表可以覆盖它。比如，P 和 DIV 的 display 特性值是 ‘block’，TABLE的display 特性值是 ‘table’。
另外注意，在IE6和IE7中，对display特性支持的不完全。例如：
这节的概念较多，较为抽象，没必要每一小条都记住。大概理解即可，但一定要搞清楚什么是块元素和块框，什么是行内元素和行内框。
可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
这次，跟大家分享另一个比较重要的概念，这个概念也许大家会很熟悉，因为经常挂在嘴边，这就是，块元素和块框，行内元素和行框，以及 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 >
来自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 >
注意， 行框(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，而背景是透明的。
空格内容会根据 '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 >
A run-in heading. And a
paragraph of text that
follows 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-column-group | table-column |table-cell | table-caption | none | inherit
初始值 ： inline
适用于 ： 所有元素
可否继承 ： 否
百分比 ： N/A
媒介 ： 所有
block
该值使一个元素生成一个块框。
inline-block
该值使一个元素生成一个块框，自身在文档流中像一个行内元素，跟替换元素相似。元素的内部按照块框格式化，自身按照一个行内替换元素格式化。
inline
该值使一个元素生成一个或多个行内框。
list-item
该值使一个元素（如HTML中的LI）生成一个原始块框和一个列表项行内框。要了解列表和列表格式化的信息，请参见列表一节。
none
该值使一个元素在格式化结构中不显示（换言之，该元素对布局没有影响）。子孙元素也不产生任何框；该行为不能由设置子孙元素的 'display' 属性而被覆盖。
请注意 'none' 的显示特性并不生成一个不可见的框；它根本不生成框。CSS包含了机制使一个元素能够在格式化结构中生成框而影响格式化，但本身不可见( visible 特性)。
run-in
根据上下文，这些值要么生成块框，要么生成行内框。对于插入和压缩框适用的属性基于它们最终的状态（行内或块类）。
注意，尽管'display'的初始值是 'inline'，用户端（对我们来说是浏览器）的缺省样式表可以覆盖它。比如，P 和 DIV 的 display 特性值是 ‘block’，TABLE的display 特性值是 ‘table’。
另外注意，在IE6和IE7中，对display特性支持的不完全。例如：
-
HTML code
-
<! DOCTYPE html > < div style ="display:table;border:1px solid red;" > IE6 and IE7 don't support the property value </ div >
这节的概念较多，较为抽象，没必要每一小条都记住。大概理解即可，但一定要搞清楚什么是块元素和块框，什么是行内元素和行内框。
可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
