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
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
在學習 CSS 的過程中，Padding 與 Margin 是兩個經常出現的名詞，但對於初學者來說，可能會有些難以理解。因此，本篇文章將解釋這兩個非常重要的 CSS 屬性。當你掌握後，便能設計出更具層次或易讀的網頁。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。