CSS入門-Day5：盒模型
閱讀時間約 5 分鐘
盒模型概述
CSS 盒模型由以下部分組成：
- 內容區域（Content Area）：顯示內容的實際區域（如文字、圖像等）。
- 內邊距（Padding）：內容區域與邊框之間的間距。
- 邊框（Border）：包圍內容區域和內邊距的邊框。
- 外邊距（Margin）：元素與相鄰元素之間的距離。
這些部分組成了一個元素的完整顯示區域。下圖展示了盒模型的結構：
+---------------------------+
| margin |
| +---------------------+ |
| | border | |
| | +--------------+ | |
| | | padding | | |
| | | +----------+ | | |
| | | | content | | | |
| | | +----------+ | | |
| | +--------------+ | |
| +---------------------+ |
+---------------------------+
盒模型屬性
內邊距（Padding）
設置內容區域與邊框之間的間距，可以分別設置四個方向的內邊距：上、右、下、左。
- 單方向內邊距：
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
} - 簡寫屬性：
div {
padding: 10px 20px 30px 40px; /* 上右下左 */
/* 或者 */
padding: 10px; /* 四個方向都設置為 10px */
}
邊框（Border）
設置包圍內容區域和內邊距的邊框，可以設置邊框寬度、樣式和顏色。
- 單方向邊框：
div {
border-top-width: 5px;
border-top-style: solid;
border-top-color: red;
} - 簡寫屬性：
div {
border: 5px solid red; /* 寬度、樣式和顏色 */
}
外邊距（Margin）
設置元素與相鄰元素之間的距離，可以分別設置四個方向的外邊距：上、右、下、左。
- 單方向外邊距：
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
} - 簡寫屬性：
div {
margin: 10px 20px 30px 40px; /* 上右下左 */
/* 或者 */
margin: 10px; /* 四個方向都設置為 10px */
}
盒模型調試
現代瀏覽器提供了開發者工具，可以用來調試和檢查元素的盒模型。在開發者工具中，可以查看元素的內容區域、內邊距、邊框和外邊距。
使用開發者工具
以下是如何在常見瀏覽器中打開開發者工具：
- Chrome：右鍵點擊頁面上的任何元素，選擇“檢查”或按
Ctrl + Shift + I（Windows）/Cmd + Option + I（Mac）。 - Firefox：右鍵點擊頁面上的任何元素，選擇“檢查元素”或按
Ctrl + Shift + I（Windows）/Cmd + Option + I（Mac）。 - Safari：右鍵點擊頁面上的任何元素，選擇“檢查元素”或按
Cmd + Option + I（Mac）。
查看盒模型
在開發者工具中選擇某個元素後，可以查看該元素的盒模型，通常在“元素”或“樣式”面板中。這裡會顯示內容區域、內邊距、邊框和外邊距的大小和詳細信息。
完整示例
這裡是一個完整的示例，展示如何使用盒模型屬性來設置內邊距、邊框和外邊距，並使用瀏覽器開發者工具來調試。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 盒模型示例</title>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">這是一個示例盒子。</div>
</body>
</html>
留言0
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。