容器模型簡介

整個線上內容是採用容器模型建構的。 HTML 元件（例如段落區塊、分割元素、部分等）在容器內進行描述，網站設計將這些元素一個一個地組裝在一起，就像堆積起來的容器一樣。

本教程將涵蓋：

1. 容器在網路上的利用
2. 應用容器進行適應性設計
3. 實作嵌套容器
4. 客製化容器

在網路上使用容器

每個 HTML 元件（例如，段落、分區元素、部分）都在 Web 上的容器中表示。設想一個不可見的邊框包圍每個組件，並將該實體包含在容器內。您可以使用這些隱藏容器來設計元件和網站佈局（例如，您可以在元件容器周圍附加空間或向元件容器引入邊框）。這些容器彼此相鄰或堆疊在一起，取決於它們的屬性。

應用容器進行適應性設計

線上內容的功能不像演示文稿，可以將元素手動放置在任何地方。簡報旨在以單一解析度查看，並且缺乏在不同裝置和瀏覽器上的回應能力。

Web 佈局的操作更類似於文字 document，其中內容自然地從頁面的左上角串流傳輸，在到達 document 的右側邊緣後前往下一行（即換行）。內容是響應式的，因為它符合不同的解析度。例如，當調整文字document視窗的大小時，內容格式將自動調整，而不改變 方面 的內容。

最初，容器模型可能看起來不靈活，但在為不同設備和螢幕尺寸製作響應式設計時，它提供了顯著的適應性。了解有關響應式設計的更多資訊。