Simple Block, Simple Inline.

關於 Block 和 Inline 的概念,我們可以從 HTML 和 CSS 這兩方面去了解。

Block & Inline in HTML

在 HTML , Block 和 Inline 的概念可以體現在 Block-level Elements 和 Inline(-level) Elements 上。

Block-level 和 inline 是 HTML 中 elements 的兩個種類,能在 body 裡面出現的 element 幾乎都可以歸成這兩類的其中之一,它們之間的分別我們可以從三方面予以了解。

Formatting

一般來說 block-level elements 的最上方和最下方都會有換行,而 inline elements 則隨著文字的順位出現,和 CSS 所控制的 Presentation 不同,這就算是在老到掉牙、不支援 Style Sheet 的 browsers 上也會正確地顯示出來。

Content Model

Block-level elements 可以分成三種:能容納其他 block-level elements 或 inline elements (像 div) ;只能容納 block-level elements (Strict document type 的 body) ;只能容納 inline elements 和 text (有經常用到的 p) 。 Block-level elements 作為其他 elements 和 text 的容器,可以說是構成整個文件結構的主要部份。

Inline elements 則只能容納其他 inline elements 和文字 (object 例外) , 一般都帶有意思,包含了 HTML 中大部分的語意 (semantics) 。

Directionality

這不在本文的討論範圍內。

至於 delins 這兩個 elements 的情況則有點特殊,它們跟據不同的情況,可以是 block-level ,也可以是 inline 。

注意 DTD 中定義了什麼 elements 是 block-level 、什麼 elements 是 inline ,我們沒法子改變。

Block & Inline in CSS

在 CSS 裡, block 和 inline 的概念表現在所謂的 box 裡。 Elements 產生 boxes ,而 boxes 可以被理解為一個個長方形的,這些框是作為 document 本身視覺上的表達而存在,但 boxes 本身不等於 elements ,一個 element 可以產生多個或是根本不產生 boxes 。粗略地說, block-level elements (HTML) 產生 block boxes ,而 inline elements 產生 inline boxes 。

和 HTML 不同, CSS 裡可以透過 display 這個 property 去改變 boxes 的種類。在無視掉 table 系那十個 values 後,跟據 display property 不同的 value 將會產生或 inline 或 block 的 boxes :

  1. block
  2. list-item
  3. run-in (某些情況)
  4. table (有點不同)

會產生 block boxes 。

  1. inline
  2. run-in (某些情況)

會產生 inline boxes 。

另外也有其他情況會產生 block boxes ,像是 floatabsolute positioning 的場合,本文暫不詳述。

在下一篇文章將會深入探討所謂的 block boxes (如果有的話 XD) 。

Comments

  1. 允許註明出處、改寫、轉載乎?
    http://blog.yam.com/webdev

    ReplyDelete
  2. 啊,好久不見。

    在註明出處的情況下,轉載、節錄、加註和翻譯都是允許的,但改寫則必須先得到在下同意。

    反正這篇文也不能登大雅之堂,私下聯絡罷。
    limouren[在]gmail[點]com

    ReplyDelete
  3. 我先改寫一回然後寄給你看看,我想大致上是「加註/翻譯」的成分居多,然後如果你覺得不妥的地方我們再討論囉,多謝 ;)

    ReplyDelete

Post a Comment