run-in元素

网站建设CSS2引入了一个值run-in，这也是一个有意思的块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分，这种功能对于某些标题效果很有用，这在打印排版中相当常见，即标题作为文本段落的一部分出现。在网站建设CSS中，只需改变元素的display值，并使下一个元素框作为块级元素框，就可以使元素成为run-in元素。注意，这里我所说的是框，而不是元素本身。换句话说，不论元素是块元素还是行内元素都无关紧要，重要的是元素生成的框。设置为display: block的strong元素会生成一个块级框，设置为display: inline的段落则会生成一个行内框。

所以，重申一句：如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框。例如：

<h3 style="display: run-in; border: 1px dotted; font-size: 125%;

font-weight: bold;">Run-in Elements</h3>

<p style="border-top: 1px solid black; padding-top: 0.5em;">

Another interesting block/inline hybrid is the value <code>run-in</code>, 

introduced in CSS2, which has the ability to take block-level elements and 

make them an inline part of a following element. This is useful for certain 

heading effects that are quite common in print typography, where a heading 

will appear as part of a paragraph of text.

</p>

由于h3后面的元素生成一个块级框，所以h3元素将变成p元素内容开始处的一个行内元素。

注意两个元素的边框是如何放置的。这种情况下使用run-in的效果与使用以下标记完全相同：

<p style="border-top: 1px solid black; padding-top: 0.5em;">

<span style="border: 1px dotted; font-size: 125%; font-weight: bold;">Run-in 

Elements</span> Another interesting block/inline hybrid is the value 

<code>run-in</code>, introduced in CSS2, which has the ability to take 

block-level elements and make them an inline part of a following element. 

This is useful for certain heading effects that are quite common in print 

typography, where a heading will appear as part of a paragraph of text.

</p>

不过，网页设计中run-in框与前面的标记示例之间还存在一个小小的差别。即使run-in框格式化为另一个元素中的行内框，它们仍从文档中的父元素继承属性，而不是说它们放在哪个元素中就从哪个元素继承属性。再来扩展前面的例子，在最外面加一个div，并增加一些颜色：

<div style="color: silver;">

<h3 style="display: run-in; border: 1px dotted; font-size: 125%;

font-weight: bold;">Run-in Elements</h3>

<p style="border-top: 1px solid black; padding-top: 0.5em; color: black;"> 

Another interesting block/inline hybrid is the value <code>run-in</code>, 

introduced in CSS2, which has the ability to take block-level elements and 

make them an inline part of a following element.

</p>

</div>

在这种情况下，h3将是银色而不是黑色，如图7-54所示。这是因为在插入到段落之前，它从其父元素（div）继承了颜色值。要记住重要的一点，只有当run-in框后面是一个块级框时run-in才起作用。如果不是这样，run-in框本身将成为块级框。因此，给定以下标记，h3仍然是（或者会变成）块级元素，因为table元素的display值是（非常奇怪）table:

<h3 style="display: run-in;">Prices</h3>

<table>

<tr><th>Apples</th><td>$0.59</td></tr>

<tr><th>Peaches</th><td>$0.79</td></tr>

<tr><th>Pumpkin</th><td>$1. 29</td></tr>

<tr><th>Pie</th><td>$6.99</td></tr>

</table>

网页设计人员不太可能将值run-in应用到一个自然的行内元素，但是一旦发生这种情况，这个元素则极有可能生成一个块级框。例如，以下标记中的em元素将成为块级元素，因为它后面没有跟一个块级框：

<p>

This is a <em>really</em> odd thing to do,<strong>but</strong> you could do it

if you were so inclined.

</p>

警告：写作本书时，很少有浏览器对run-in提供支持。

计算值

如果元素是浮动元素或定位元素，display的计算值可以改变。如果为一个根元素声明display值，计算值也可以改变。实际上，display、position和float值会以很有意思的方式相互影响。

如果一个元素是绝对定位元素，float的值设置为none。对于浮动元素或绝对定位素，计算值由声明值确定。

inline-table

table

inline, run-in, table-row-group, table-column, table-column -group, 

table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block

block

所有其他  根据指定确定

对于根元素，如果声明为值inline-table或table，都会得到计算值table，声明为none时则会得到同样的计算值（none）。所有其他display值都计算为block。

小结

尽管网站建设CSS格式化模型的某些方面乍看起来有些不太直观，不过等你多熟悉一些就会发现这是有道理的。很多情况下，最初看上去没道理甚至荒谬的规则最后看来确实是合理的，它们会防止一些奇怪的或我们不期望的文档显示结果。在很多方面，块级元素都很容易理解。调整其布局通常是一个简单的任务。另一方面，行内元素则可能很难管理，因为有很多影响因素，其中也包括元素是替换元素还是非替换元素。既然我们已经对文档布局的基础知识有所了解，下面再来关注如何使用各种布局属性。后面的几章都在讨论这个方面，首先来看最常用的框属性：内边距、边框和外边距。

　　【注释】

　　[1]　译注1：严格地说，需求应该是“元素的7项水平属性的总和”不能比其包含块更宽。