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

匿名塊盒子 (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>

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

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

參考資源

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