iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
2

★ 村落裡某條街上 ↓↓↓

顯示商店位置圖

(*゚ー゚):
為何對「inline」設定寬度與高度,
卻又能正常顯示?

:不解的追問。

閱讀前,建議先向 鉄人2号「文本士」收集資料,此章為初探村落續文。

商店老闆 [置換象]
在 CSS 中,置換元素是其表示超出 CSS 範圍的元素,它們是外聯對象,表示獨立於 CSS 格式化模型。換句話說,對象不受當前文檔樣式的影響。

而使用 CSS 樣式屬性是可以影響置換元素的位置 (例 vertical-align),但不會改變置換元素本身的內容。

:怎麼突然換了人?

你儘管認真收集資料就行。(
大聲制止樣!!)

:最怕空氣突然安靜。。。
歌魂~~)

:最高品質靜悄悄。蹲~ 痾! )


★★★ 關卡條件 ↓↓↓

置換元素(Replaced elements)

  • HTML 只定義置換元素。
  • 在 CSS 規範中,只有「置換元素」的一般特徵概念,因 HTML 的發展相當獨立於 CSS。
  • 基本外聯崁入皆是置換元素。透過演變置換變成未置換 (概念隨著時間的推移有所改變)。

未置換元素

  • W3C「未置換元素」泛指任何既不是置換元素但又是行內元素。
  • 「未置換元素」只是一個單純被渲染元素,並不是讓一些外部對象出現在它的位置。

Σ(゚д゚) ★ 踢到小碎石
某些置換元素具有內部維度(Intrinsic dimension)或已定義的基準線。


HTML 定義

嵌入內容 (Embedded content):
<iframe><video><embed> 等,以及條件符合情況下,才被視為置換元素:<audio><canvas><object> 等。

而針對圖像主要又細分為 2 種:<img><input type="image">
瀏覽器主要按照下方幾種規則來渲染這兩種元素:

  • 展示圖像:瀏覽器將認為該元素是「置換元素」。
  • 不展示圖像,但該元素卻包含內部維度:
    • 瀏覽器認為此元素將來或在適當的時候被渲染。
    • 元素沒有帶有 alt 屬性。
    • 當前文檔處於怪異模式 (quirks mode)。
  • <img> 為純文本並且瀏覽器不希望其發生改變,該元素被看做是「未置換元素」。
  • <img> 為空時,並且瀏覽器不希望其發生改變,該元素被看做是空元素。
  • <input> 不展示圖像並且瀏覽器不希望其發生改變,該元素被看做是 「置換元素」。

註:未置換元素 尚未有明確解析。

CSS 定義

置換元素

  • 內容超出 CSS 格式模型範圍的元素 (例圖像、嵌入文檔或應用程式)。
  • <img> 帶有其 src 屬性。
  • 具有內在維度 (固有寬度,固有高度和固有縱橫比率)。
  • 點陣圖具有以絕對單位指定的固有寬度和固有高度。
  • 如有將敏感信息洩露給第三方疑慮,則瀏覽器可認定置換元素不具有任何內在維度。
  • CSS 渲染中不考慮置換元素的內容。

(๑• . •๑) ↓↓↓
圍籬旁老人喃喃自語聲~~
目光吸引中 )

內在維度(intrinsic dimensions)

  • 由元素本身定義的寬度和高度,不是由周圍環境強加的。
  • CSS 沒有定義如何找到內在維度。
  • 在 CSS 中,只有置換元素才能具有內在維度。
  • 對於沒有可靠分辨率信息的圖像,必須假設每個圖像來源像素為 1 像素單位。

(゜皿。) 努力解讀中 )

  • 內在維度代表為首選或自然尺寸,也就意味著和上下文 (context) 無關。
  • 任何兩個內在維度都自動定義第三個維度。 (皆具有 auto 計算其值)
  • <button> 標籤沒有內在維度,純為一般行內元素。

村長
喀喀!!(咳嗽聲)
果然鄉民都比你厲害

:思緒中斷。 )

如果搜集完各種資料,
村外西南方一公里處,有一座小樹林,
拿著 (遞出紙條),
到附近去找些可用材料回來吧。

(ヽ(∀゚ )人(゚∀゚)人( ゚∀)ノ)

噢!!是的
準備離開新手村。(
咯咯聲 )


[ 追加經驗值 ]
註:參考來源 visual formatting model details
深入前端之 replaced element
Is button a replaced element or not?


上一篇
鉄人28号FX 鉄人2号「文本士」content area
下一篇
鉄人28号FX 鉄人4号「字戰隊」font-family
系列文
鉄人28号FX30

1 則留言

0
Askie Lin
iT邦新手 5 級 ‧ 2019-09-18 16:23:13

[[[[[ 追加經驗值 ]]]]]

哈!追不完的經驗值,Askie 無障礙文寫得真好。

我要留言

立即登入留言