iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
1

前言

替換元素雖然預設為 display: inline,但又與一般常見的 inline element 不同,準確來說,它是 inline-level element 中的 atomic inline-level element。

在先前文章中介紹 inline 時提到,非替換的 display: inline 元素無法利用 width 與 height 屬性改變寬高,且僅有 line-height 會影響 line box 高度,而 display: inline 的替換元素不僅可以透過 width 與 height 屬性設定寬高,且其整個 box model 的高度皆會影響 line box。


替換元素(Replaced element)

MDN 定義 中提到,所謂的「替換元素 (replaced element)」,即是該元素所呈現的內容不在 CSS 的控制範圍之內,其所呈現的內容均獨立於 CSS 之外(為外部連結),例如 <img> 的內容是取決於 src 屬性。

常見的替換元素包含 <img><object><video>,或如 <textarea><input> 的表單元素,某些元素,像是 <audio><canvas> 只有在特殊情況下才是替換元素。若是透過 CSS content 屬性所插入的物件,則稱為「不具名替換元素 (Anonymous replaced elements)」。


替換元素的特性:

  • 預設 displayinline,為 inline-level element 之一。

  • 可以透過 widthheight 屬性改變寬高。

  • 通常本身具有固定尺寸(intrinsic dimension),例如圖片引入時就有其既有的大小。

  • 通常具有固定比例(intrinsic ratio),所以調動 width 時,height 會依照比例自動調整。

  • 整個盒模型(box model)的高度,即內容區內距邊框外距的高度皆會影響 line box高度。

  • 可能本身帶有已定義的基線(baseline)

  • 替換元素偽元素(pseudo-elements)。

  • 沒有內部顯示(inner display type),所以不會建立格式化上下文(formatting context)。


註:不屬於替換元素(replaced element)的就稱為非替換元素(non-replaced element)。


順帶一提一個常見的現象: <img> 與容器間出現縫隙。

<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/CSS.3.svg" alt="CSS logo"/>
</div>
div {
  border: 1px solid #000;
  width: 150px;
}

img {
  border: 1px solid #FFAB00;
  width: 100%;
}

下圖中,橘色框線為 <img> 的邊框(border),圖形中可清楚看到 <img> 與容器 <div> 底部有縫隙,這是因為替換元素 <img> 預設為 display: inline,屬於 inline-level element 之一,生成 inline-level box,會參與 IFC 佈局,故在容器 <div> 裡面會產生一個 line box,而替換元素 <img> 預設底部會向基線(baseline)對齊


簡單解決方法:

  • 在容器 <div> 設定 font-size = 0。
  • 讓 <img> 變為 inline-level element,例如 display: block,此時它不再是 inline-levle element,不會參與 IFC,也就不會產生 line box,當然也就沒有基線(baseline)。



替換元素就介紹到這邊囉!

明天見啦~


參考資料

HTML Standard-Replaced elements
W3C-Line height calculations
W3C-replaced element
W3C-Box Layout Modes: the display property
MDN-Replaced element


上一篇
旋轉吧 rotate3d
下一篇
flex 1
系列文
前端新手進化史30

尚未有邦友留言

立即登入留言