網頁設計中的run-in元素

    • 2018-11-15 16:27:45
    • 閱讀次數:
    • 作者:盈嵐科技小編
    • 來源:http://www.moniquemcdaniel.com

    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項水平屬性的總和”不能比其包含塊更寬。

    當前文章標題:網頁設計中的run-in元素

    當前URL:http://www.moniquemcdaniel.com/news/wzzz/run-in.html

    上一篇:網頁設計中的行內塊元素

    下一篇:網頁設計中的基本元素框

    網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
    亚洲 欧美 中文 日韩a v一区,精品无码精品中文字幕三区,国产在线麻豆自在拍91精品,免费av在线无码不卡