用例子解釋 CSS 盒模型

如果您計劃構建出色的網頁佈局，則需要了解邊距、邊框、填充和內容。網頁設計中的每個元素，無論是圖像還是文本，都使用具有這些屬性的框。您可以通過使用盒模型輕鬆構建複雜的佈局。在本文中，我們將剖析 CSS 盒模型，並通過實際示例向您展示如何使用這些屬性。

什麼是 CSS 盒模型？

CSS 盒模型是萬維網聯盟創建的標準。它將 HTML 文檔中的所有元素描述為具有自己尺寸的矩形框。這些框包含一個內容區域和可選的周圍邊距、邊框和填充區域。因此，讓我們探索 CSS 框的各個部分。

讓我們揭開 CSS 盒模型的四層。

第一層：內容

內容區域包含元素的主要內容，可以是圖像、文本或任何形式的媒體內容。您可以使用高度和寬度屬性修改塊級元素的尺寸。

第二層：填充

填充是內容框與其邊框框之間的空間。雖然它作為空白位於您的內容周圍，但您可以使用背景顏色來可視化差異。您可以應用padding-top、padding-right、padding-bottom和padding-left屬性來修改空間。

第三層：邊框

邊框環繞內容和填充區域。您可以使用border-width、border-style和border-color屬性調整邊框的大小和样式。

第四層：保證金

盒模型的最後一層被廣泛用於在元素之間生成空間。邊距環繞內容、填充和邊框區域。您可以使用margin-top 、 margin-right、margin-bottom和margin-left屬性。你也可以給 margin 屬性一個負值或auto來實現一些很棒的放置技術。

CSS 盒模型的項目設置

讓我們構建一個小項目來演示帶有內容框和內邊距、邊框和邊距屬性的基本框模型。您可以使用文本、圖像或媒體內容。我們將首先確保它的結構正確。

使用 HTML 的結構

CSS 盒模型

輸出：

您可以使用瀏覽器的內置功能（例如Chrome 開發人員工具）來查看發生了什麼。我們使用了來自 Unsplash 的兩個圖像。為簡單起見，我們將使用display: none;隱藏智能手機圖像。直到我們以後需要它。

使用 CSS 設計樣式

/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }

現在，讓我們設計我們的內容框。首先，我們將設置圖像的高度和寬度。此外，提供背景顏色有助於更好地可視化。所以，讓我們去做吧。

/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }

使用填充為內容提供呼吸空間

您可以單獨設置padding-top、padding-right、padding-bottom和padding-left屬性或使用簡寫。如果可能，請嘗試使用速記，因為它可以為您節省一些時間。讓我們看看填充是如何工作的。

/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;

輸出：

使用邊框在填充周圍繪製線條

應用邊框屬性時，請確保使用邊框顏色屬性為邊框提供與背景不同的顏色。您可以使用速記屬性單獨或一次性選擇邊框樣式。這同樣適用於border-width屬性。

您還可以設置border-radius為框提供圓角，半徑為px、rem、em或百分比。

/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;

輸出：

在帶有邊距的框之間添加空間

您可以使用margin: 0 auto將框水平居中，前提是它具有確定的寬度。

/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;

輸出：

您可以使用一個、兩個、三個或四個值來指定邊距屬性。這些值可以是長度、百分比或關鍵字，如auto。讓我們了解它是如何工作的：

• 當您僅指定一個值時，這意味著所有四個邊將具有相同的邊距。
• 當您指定兩個值時，第一個值表示margin-top和margin-bottom ，而第二個值指定margin-right和margin-left。
• 當您指定三個值時，第一個和最後一個分別應用於margin-top和margin-bottom。中間值用於水平區域，即margin-right和margin-left。
• 當您指定所有四個值時，它們分別應用於頂部、右側、底部和左側（按順時針順序）。

請注意，您還可以將這些快捷方式用於填充和邊框屬性。

另請參閱：基本的 CSS3 屬性備忘單

您曾經使用過負邊距嗎？為了形象化，讓我們擦除顯示：none顯示我們的第二張圖像，然後設置一個負邊距。

/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 3em -20em 3em 5em; }

輸出：

盒子模型：製作像素完美的網站

框模型允許您定義元素之間的空間、添加邊框並輕鬆構建外觀複雜的佈局。您可以立即開始創建一個很棒的網站。同時，您可以詳細探索border-box屬性並使用上面的代碼。

您應該了解在 CSS 中佈局內容還有其他方法。其中包括 CSS Grid 和 CSS Flexbox。一旦您對盒模型感到滿意，您應該繼續了解這些替代方案。