DAY 8：盒子模型概念

2024 iThome 鐵人賽

DAY 8

自我挑戰組

前端基礎：HTML 和 CSS 的 30 天學習之旅系列第 8 篇

16th鐵人賽

wujia0224

2024-09-22 00:21:19

78 瀏覽

分享至

在學習 CSS 排版時，理解 盒子模型 (Box Model) 是很重要的。

盒子模型是 CSS 中用來設計和布局 HTML 元素的一個基本概念。因此每個 HTML 元素都可以被視為一個盒子，盒子模型描述了這個盒子如何處理元素的大小、邊距、邊框和內邊距。

盒子模型的組成部分

盒子模型由四個主要部分組成，從內到外依次是：

內容區 (Content): 元素的實際內容區域，如文字或圖片的顯示範圍。
內邊距 (Padding): 內容與邊框之間的距離，內邊距會擴大盒子的大小，但不會影響背景顏色的顯示，背景顏色會填充內邊距部分。
邊框 (Border): 包裹在內容和內邊距外的一層，邊框的寬度會影響元素的總大小。
外邊距 (Margin): 元素與外部其他元素之間的距離，外邊距可以是正值、負值或自動調整。

CSS盒子模型

盒子模型的結構與尺寸計算

盒子模型的總寬度和總高度是由以下幾個部分決定的：

總寬度 = 內容區寬度 + 內邊距（左 + 右）+ 邊框（左 + 右）+ 外邊距（左 + 右）
總高度 = 內容區高度 + 內邊距（上 + 下）+ 邊框（上 + 下）+ 外邊距（上 + 下）

範例：假設一個盒子的寬度為 300px，內邊距為 10px，邊框為 5px，外邊距為 20px，則該盒子的總寬度為：

總寬度 = 300px + (10px * 2) + (5px * 2) + (20px * 2) = 370px

盒子模型的 CSS 屬性

盒子模型中的每個部分都可以使用對應的 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;
}

網頁會呈現下圖：