探險日記 DAY 29

2024 iThome 鐵人賽

DAY 29

Modern Web

30天前端之旅：探索web開發的探險日記系列第 29 篇

16th鐵人賽

yillun

團隊NUTC_IMAC

2024-10-08 18:02:18

412 瀏覽

分享至

今天我們來看看CSS的盒模型~

CSS 盒模型

CSS 盒模型決定了網頁元素的尺寸、間距與邊框。每個 HTML 元素都可以視作一個盒子，由四個部分組成：

content：實際內容，例如文字或圖片。
padding：內容與邊框之間的空間，會增加元素的總尺寸。
border：包在 padding 外部的邊框，增加盒子的總大小。
margin：元素與其他元素間的距離，不影響盒子的內容。

範例：

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid #007bff;
    margin: 30px;
    background-color: #f8f9fa;
  }
</style>

<body>
  <div class="box">
    <p>這是一個應用了 CSS 盒模型的範例。</p>
  </div>
</body>

`box-sizing` 屬性

box-sizing 控制盒模型的計算方式：

content-box（默認）：width 只包括內容，不含 padding 和 border。
border-box：width 包含 content、padding 和 border，使元素總寬度保持一致。

範例：

<style>
  .box-border-box {
    width: 300px;
    padding: 20px;
    border: 5px solid #28a745;
    box-sizing: border-box;
  }
</style>

<body>
  <div class="box-border-box">
    <p>這是使用 `box-sizing: border-box` 的範例。</p>
  </div>
</body>