iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

前端新手進化史系列 第 20

淺談 line box 高度

文章將陸續整理並更新至個人部落格


前言

所有 inline-level elements 所生成的 inline-level boxes 皆會參與行內格式化上下文(IFC),在 IFC 佈局環境裡的盒子,會一個一個呈現水平排列,此時會出現 line box 來容納這些 inline-level box。

由於 line box 過於複雜,今天僅討論 line box 高度的部分~

line box

摘自W3C

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

The rectangular area that contains the boxes that form a line is called a line box.

IFC 佈局環境裡,盒子會一個接一個呈現水平排列,盒子之間可能有外距、邊框、內距,而容納這些盒子的矩形區域就是一個 line box。其實 line box 很像一行一行的概念,一個段落就是由許多 line box(行)組成。


line box 高度

在看規範定義前,先複習一下,在 inline-level box 中,非 inline box 的即為 atomic inline-level box,包括替換元素、inline-block 元素、inline-table 元素等所生成的盒子。可參考先前文章 視覺格式化模型-Box generation(中)

摘自W3C

The height of a line box is determined as follows:

The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.

The line box height is the distance between the uppermost box top and the lowermost box bottom.

也就是說,一個 line box高度取決於:

  • 所容納的 inline-level box,其中 inline-level box 又可分為 inline box 與 atomic inline-level box 兩種。

    • 若是 inline box,例如display: inline
      ⇒ 僅取決於行高(line-height)包含 padding、border、margin。

    • 若是 atomic inline-level box,例如替換元素 <img>display: inline-block

      ⇒ 取決於 box model 高度即包含 margin 部分。

      註:
      ① box model 高度為內容區高度 + 上下內距 +上下邊框 + 上下外距。
      其它替換元素

  • 一個 line box 高度為位置最高inline-level box 頂部與位置最低inline-level box 底部的距離。

來看個例子吧


1. inline box 僅有 line-height 會影響 line box

<span> 預設值為 display: inline,為 inline-level element 中的 inline element,故其僅有 line-height 會影響 line box,padding、border、margin 皆不會影響 line box 高度。

<div>Lorem ipsum, dolor sit add
    <span>我在 inline box 裡面</span>
    Lorem ipsum, dolor sit amet consectetur .
</div>
div {
  width: 220px;
  margin: 200px;
  border: 1px solid #000;
}

span {
  background-color: orange;
  padding: 10px;
}

為方便觀察,給 <span> 背景橘色的顏色,並給 <span> 上下左右 padding 各 10px。
反白區域為一個 line box 高度。可以清楚看見,line box 並沒有長高,所以上下方的文字沒有被推開(但左右有)。


2. atomic inline-level box 的盒模型高度會影響 line box

現在將 <span> 設定為 display: inline-block,<span> 仍然屬於 inline-level element,但由 inline element 變成 atomic inline-level element。

span {
  display: inline-block; /* 變成 atomic inline-level */
  background-color: orange;
  padding: 10px;
}

反白區域為一個 line box 高度。可以清楚看見,line box 長高,所以上下方文字的距離也隔開了!


3. 不同 IFC 中的 line box

<div class="box">文字
  <div class="inline-block">inline-block</div>
</div>
.box {
  dispaly: block;
  width: 140px;
  outline: 1px solid #000;
  background-color: #546E7A;
  color: #eee;
  margin: 200px;
}

/* atomic inline-level 元素整個 box model 的高度皆會影響 line box 高度 */
.inline-block {
  display: inline-block; 
  outline: 1px solid #000;
  margin-top: 20px;  
  margin-bottom: 20px; 
  height: 50px;
  background-color: #FFAB00;
 }

在這個例子中,會出現兩個 line box,分別處於不同IFC

因 display: inline-block 與文字皆為 inline-level element,生成的 box 會參與 IFC,此時就會出現 line box 來容納這些 inline-level boxes。

在 display: inline-block 的橘色矩形裡面,有一行 line box,其高度由內容「inline-block」的 line height 決定。反白區域的高度為 line box 高度

而「文字」與 display: inline-block 的橘色矩形又會構成一個 line box,此 line box 會受到橘色矩形的 box model 高度影響,因橘色矩形為 atomic inline-level box。
反白區域的高度為 line box 高度

註:
① display: inline-block 生成 block container box,其內容不參與外部 IFC。
② block container box 可以同時建立 BFC 與 IFC。


line box 實在非常複雜~
今天的 line box 淺談到此囉

掰拉~/images/emoticon/emoticon35.gif



以上如有理解錯誤的地方,麻煩指點指點~感恩!



參考資源

W3C-Inline formatting contexts
W3C-Line height calculations
鉄人28号FX 鉄人2号「文本士」content area


上一篇
視覺格式化模型 - 行內格式化上下文(IFC)
下一篇
旋轉吧 rotate3d
系列文
前端新手進化史30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言