iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
1

倘若不斷向深處扎根,就能茁壯成長 - RM

/images/emoticon/emoticon42.gif

前言

昨天我們聊到了 block-level,接續昨天的介紹,今天我們要來看的是 inline-level box,那事不宜遲,我們開始吧~

Inline-level elements and inline boxes

規範直通車:
Visual formatting model
規範定義:
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generateinline-level boxes, which are boxes that participate in an inline formatting context.

  • inline-level elements 代表那些元素內容不會構成新的 block。
  • inline-level box 參與 IFC。
  • inline 又可以當作 “inline-level box”、“inline box” 的簡寫呦~
  • inline box 是當同時為 inline-level box 且內容會同時參與它的 containing 生成 IFC
  • atomic inline-level boxes 是為 inline-level box 但內容會以一個塊的概念去參與在 IFC 中(好比:inline-blockinline-table

舉例來說,組成 block-level 的 display 屬性值包含:

  1. inline
  2. inline-block
  3. inline-table
  4. inline-flex
  5. inline-grid
  6. ...。

Anonymous inline boxes

block container 中直接包含的文字都會被視為匿名狀態的 inline element,舉如下的例子來說。

<p>Some <em>emphasized</em> text</p>

在這裏 emphasized 本身的 inline box 是由一個 inline element <em>生成,Some 以及 text 是直接在 <p> 這個 block container 中,這時候它們就會被 <p> 生成的 Anonymous inline boxes 所包覆,因為他們本身沒有關聯的 inline element。

如同上述的 Anonymous inline boxes 中:

  • 可繼承的 CSS 屬性值會繼承自 block 父元素。
  • 不可繼承的 CSS 屬性值會是 initial 初始值。

結語

以上講述了 inline-level box 的定義以及舉例說明了 Anonymous inline boxes 上產生的行為,當我們定義了一個 inline 時其實它所作用的行為比我們想像的更精密且複雜,若是想要參照中文也可以使用 MDN 上的 视觉格式化模型 - Web 开发者指南 | MDN 搭配規範參考呦,我們明天見~


參考資料:

CSS Display Module Level 3
Visual formatting model


以上的部分有任何錯誤的地方,歡迎指正呦~非常感謝~~XD


上一篇
Visual Formatting Model - block
下一篇
Visual Formatting Model - BFC、IFC
系列文
每天來點 CSS Specification30

尚未有邦友留言

立即登入留言