iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

前端新手進化史系列 第 15

視覺格式化模型-Box generation(下)

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


匿名塊盒子 (Anonymous block boxes)

由於 塊容器盒(block container box) 「只能裝塊級盒子(block-level box)或行內級盒子(inline-level box)」,若塊容器盒同時包含文字內容與塊級盒子,且文字內容不被包含在塊級盒子裡,此時塊容器會生成匿名塊盒子(anonymous block box)來包覆文字內容。


匿名塊盒子特性:

  • 無法使用 CSS 選擇器單獨選取,所以其樣式僅能透過繼承,若是無法繼承的屬性,則會是原始值(initial)。


例如:

在此例中會出現兩個匿名塊盒子,即在 <p> 的前方與後方各自形成一個匿名塊盒子,無法透過 CSS 選擇器單獨改變其樣式。其結構如下:

註:
① <div> 與 <p> 的 display 屬性值皆為預設值 block。
② 塊盒子(block box) 為塊級盒子之一。

<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>

圖片來源: MDN


匿名行內盒子 (Anonymous inline boxes)

同理,若是塊容器盒子同時包含文字內容與行內級盒子,且文字內容不被包含在行內級盒子內,塊容器將生成匿名行內盒子(anonymous inline boxes)包覆這些文字。

匿名行內盒子特性:

  • 無法使用 CSS 選擇器單獨選取,所以其樣式僅能透過繼承,若是無法繼承的屬性,則會是原始值(initial)。


例如:

在此例中,會出現兩個匿名行內盒子,分別裝著「我在匿名行內盒子裡」的文字內容,無法透過 CSS 選擇器單獨改變其樣式。

註:行內盒子(inline box)為行內級盒子之一。

<div>我在匿名行內盒子裡<span>我在行內盒子裡</span>我在匿名行內盒子裡</div>


盒子的生成就介紹到這邊囉
明天見~


/images/emoticon/emoticon43.gif

此文章為學習筆記,如有錯誤,麻煩告知,感恩餒!


參考資源

W3C-Anonymous block boxes
W3C-Anonymous inline boxes
MDN-Visual formatting model


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

尚未有邦友留言

立即登入留言