網(wǎng)站建設(shè)CSS2引入了一個(gè)值run-in，這也是一個(gè)有意思的塊/行內(nèi)元素混合，可以使某些塊級(jí)元素成為下一個(gè)元素的行內(nèi)部分，這種功能對(duì)于某些標(biāo)題效果很有用，這在打印排版中相當(dāng)常見，即標(biāo)題作為文本段落的一部分出現(xiàn)。在網(wǎng)站建設(shè)CSS中，只需改變?cè)氐膁isplay值，并使下一個(gè)元素框作為塊級(jí)元素框，就可以使元素成為run-in元素。注意，這里我所說的是框，而不是元素本身。換句話說，不論元素是塊元素還是行內(nèi)元素都無關(guān)緊要，重要的是元素生成的框。設(shè)置為display: block的strong元素會(huì)生成一個(gè)塊級(jí)框，設(shè)置為display: inline的段落則會(huì)生成一個(gè)行內(nèi)框。
所以，重申一句：如果一個(gè)元素生成run-in框，而且該框后面是一個(gè)塊級(jí)框，那么該run-in元素將成為塊級(jí)框開始處的一個(gè)行內(nèi)框。例如：
<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后面的元素生成一個(gè)塊級(jí)框，所以h3元素將變成p元素內(nèi)容開始處的一個(gè)行內(nèi)元素。
注意兩個(gè)元素的邊框是如何放置的。這種情況下使用run-in的效果與使用以下標(biāo)記完全相同：
<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>
不過，網(wǎng)頁設(shè)計(jì)中run-in框與前面的標(biāo)記示例之間還存在一個(gè)小小的差別。即使run-in框格式化為另一個(gè)元素中的行內(nèi)框，它們?nèi)詮奈臋n中的父元素繼承屬性，而不是說它們放在哪個(gè)元素中就從哪個(gè)元素繼承屬性。再來擴(kuò)展前面的例子，在最外面加一個(gè)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所示。這是因?yàn)樵诓迦氲蕉温渲埃鼜钠涓冈兀╠iv）繼承了顏色值。要記住重要的一點(diǎn)，只有當(dāng)run-in框后面是一個(gè)塊級(jí)框時(shí)run-in才起作用。如果不是這樣，run-in框本身將成為塊級(jí)框。因此，給定以下標(biāo)記，h3仍然是（或者會(huì)變成）塊級(jí)元素，因?yàn)閠able元素的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>
網(wǎng)頁設(shè)計(jì)人員不太可能將值run-in應(yīng)用到一個(gè)自然的行內(nèi)元素，但是一旦發(fā)生這種情況，這個(gè)元素則極有可能生成一個(gè)塊級(jí)框。例如，以下標(biāo)記中的em元素將成為塊級(jí)元素，因?yàn)樗竺鏇]有跟一個(gè)塊級(jí)框：
<p>
This is a <em>really</em> odd thing to do,<strong>but</strong> you could do it
if you were so inclined.
</p>
警告：寫作本書時(shí)，很少有瀏覽器對(duì)run-in提供支持。
如果元素是浮動(dòng)元素或定位元素，display的計(jì)算值可以改變。如果為一個(gè)根元素聲明display值，計(jì)算值也可以改變。實(shí)際上，display、position和float值會(huì)以很有意思的方式相互影響。
如果一個(gè)元素是絕對(duì)定位元素，float的值設(shè)置為none。對(duì)于浮動(dòng)元素或絕對(duì)定位素，計(jì)算值由聲明值確定。
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
所有其他 根據(jù)指定確定
對(duì)于根元素，如果聲明為值inline-table或table，都會(huì)得到計(jì)算值table，聲明為none時(shí)則會(huì)得到同樣的計(jì)算值（none）。所有其他display值都計(jì)算為block。
盡管網(wǎng)站建設(shè)CSS格式化模型的某些方面乍看起來有些不太直觀，不過等你多熟悉一些就會(huì)發(fā)現(xiàn)這是有道理的。很多情況下，最初看上去沒道理甚至荒謬的規(guī)則最后看來確實(shí)是合理的，它們會(huì)防止一些奇怪的或我們不期望的文檔顯示結(jié)果。在很多方面，塊級(jí)元素都很容易理解。調(diào)整其布局通常是一個(gè)簡單的任務(wù)。另一方面，行內(nèi)元素則可能很難管理，因?yàn)橛泻芏嘤绊懸蛩?，其中也包括元素是替換元素還是非替換元素。既然我們已經(jīng)對(duì)文檔布局的基礎(chǔ)知識(shí)有所了解，下面再來關(guān)注如何使用各種布局屬性。后面的幾章都在討論這個(gè)方面，首先來看最常用的框?qū)傩裕簝?nèi)邊距、邊框和外邊距。
【注釋】
[1] 譯注1：嚴(yán)格地說，需求應(yīng)該是“元素的7項(xiàng)水平屬性的總和”不能比其包含塊更寬。
當(dāng)前文章標(biāo)題：網(wǎng)頁設(shè)計(jì)中的run-in元素
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/run-in.html
