在學習 CSS 排版時,理解 盒子模型 (Box Model) 是很重要的。
盒子模型是 CSS 中用來設計和布局 HTML 元素的一個基本概念。因此每個 HTML 元素都可以被視為一個盒子,盒子模型描述了這個盒子如何處理元素的大小、邊距、邊框和內邊距。
盒子模型由四個主要部分組成,從內到外依次是:
盒子模型的總寬度和總高度是由以下幾個部分決定的:
範例:假設一個盒子的寬度為 300px,內邊距為 10px,邊框為 5px,外邊距為 20px,則該盒子的總寬度為:
總寬度 = 300px + (10px * 2) + (5px * 2) + (20px * 2) = 370px
盒子模型中的每個部分都可以使用對應的 CSS 屬性來控制:
內容區: 通過 width
和 height
設置內容區的寬度和高度。
div {
width: 300px;
height: 200px;
}
內邊距: 使用 padding
屬性設置內邊距,可以針對四個方向單獨設置內邊距。
div {
padding: 10px; /* 四邊都設置 10px */
padding-top: 15px; /* 設置上方內邊距 */
padding-right: 10px; /* 設置右方內邊距 */
padding-bottom: 15px; /* 設置下方內邊距 */
padding-left: 10px; /* 設置左方內邊距 */
}
邊框: 使用 border
屬性設置邊框的寬度、樣式和顏色。
div {
border: 5px solid black;
}
外邊距: 使用 margin
屬性設置外邊距,可以針對四個方向單獨設置外邊距。 margin: auto
可用來水平居中對齊塊級元素。
div {
margin: 20px; /* 四邊都設置 20px */
margin-top: 10px; /* 設置上方外邊距 */
margin-right: 15px; /* 設置右方外邊距 */
margin-bottom: 10px; /* 設置下方外邊距 */
margin-left: 15px; /* 設置左方外邊距 */
}
box-sizing
屬性在 CSS 中,默認元素的寬度和高度只影響內容區的大小,而不包括內邊距和邊框。因此設置一個元素的寬度可能會導致我們需要手動計算其總大小。
所以有box-sizing
屬性用來改變這種行為:
content-box
: 默認值,寬度和高度只應用於內容區,不包括內邊距和邊框。
div {
box-sizing: content-box; /* 默認行為 */
}
border-box
: 寬度和高度包括內容區、內邊距和邊框,這使得設計更加直觀,無需手動計算總寬度或高度。
div {
box-sizing: border-box; /* 更直觀的方式 */
}
範例:
div {
width: 300px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}
從範例來看,元素的總寬度仍然是 300px,因為 box-sizing: border-box;
包括了內邊距和邊框。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">
<p>這是一個盒子</p>
</div>
</div>
</body>
</html>
CSS (styles.css
):
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
max-width: 600px;
margin: 50px auto;
}
.box {
width: 100%;
padding: 20px;
margin: 10px;
border: 5px solid #333;
background-color: #fff;
box-sizing: border-box;
}
p {
text-align: center;
color: #333;
}
網頁會呈現下圖:
突然發現我好像沒有介紹過在HTML裡的單位,所以我明天會先把HTML裡的單位整理起來~