2 Box 盒子模組介紹
盒子模組的概述——它如何塑造網頁設計並讓您在 Webflow 中構建佈局具有更大的靈活性。
Last updated
盒子模組的概述——它如何塑造網頁設計並讓您在 Webflow 中構建佈局具有更大的靈活性。
Last updated
盒子模組描述了佈局在網絡上的工作方式。
Photoshop 或 PowerPoint 等工具允許您將元素放置在給定文檔中的任何位置。Web 佈局基於垂直堆疊的內容,就像文檔中的段落一樣。 在本課中:
了解 boxes
使用 boxes 進行響應式設計
群組 boxes
嵌合 boxes
所有元素都是 boxes。這個網頁上的每個元素都被視為一個盒子——想像每個元素周圍都有一個不可見的邊界。這些盒子自然而然地彼此相鄰或堆疊在一起,具體取決於它們的屬性。
Web 內容不像 PowerPoint 或 Photoshop 文檔,其中的元素可以手動放置在任何地方。這些文檔沒有響應——創建的內容是為了以一種分辨率查看。
boxes 模型的一個重要方面是它允許您在其他盒子中插入盒子(即“嵌套”)。這意味著您可以將任何 Webflow 元素拖放到另一個元素中。Webflow 中的所有元素都是可以相互嵌套的盒子。例如,您可以將標題、段落和圖像元素放在容器中。這個容器將這些其他元素組合在一起,每當你移動容器時,它裡面的所有盒子都會出現。
當一個盒子的內容增加時,盒子的大小自然也會增加。這意味著通常不需要在元素上設置定義的高度——相反,我們可以讓內容決定高度。
但是我們如何在元素之間創建間距呢?這就是 margin 和 padding 的用武之地。margin 在盒子外面創造空間,把其他盒子推開,而 padding 在盒子裡面創造空間 。這可以應用於任何 boxes —— 一個包含其他 boxes(“父”元素)的 boxes,或者裡面的 boxes(“子”元素)。
您可以通過向頁面添加內容並調整填充和邊距來創建一個簡單的網站。但是您通常需要元素水平分佈或在屏幕上的特定位置分佈。這就是不同的佈局技術發揮作用的地方。顯示設置控制元素的默認顯示或佈局行為,定位屬性控制其他佈局行為。