CodeGym/Adesua ahorow/Frontend SELF TW/內容與邊框模型

內容與邊框模型

開放

4.1 box-sizing 屬性

CSS 中的 box-sizing 屬性是一個強大的工具,用於管理元素大小計算模型。 它定義了如何計算元素的尺寸,包括寬度、高度、padding、border 和 margin。接下來我們會詳細解釋 box-sizing 的工作原理,以及它的應用如何影響網頁的佈局。

主要的 box-sizing 模型

Content-box (內容模型)

content-box 是所有元素的預設值。在這個模型中,元素的尺寸 (widthheight) 只定義內容的大小,不包括 padding 和 border。這意味著 padding 和 border 會被加到元素的總寬度和高度中。

Border-box (邊框模型)

border-box 改變了尺寸計算模型,使得元素的尺寸 (widthheight) 包括 padding 和 border。這意味著 padding 和 border 是整體寬度和高度的一部分,簡化了計算和元素尺寸管理。

box-sizing 的使用範例:

CSS
.box {
  background-color: #3498db;
  color: white;
  padding: 20px;
  border: 5px solid #2c3e50;
  margin: 10px;
  width: 200px;
  height: 100px;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
HTML
<div class="box content-box">Content-box: 寬和高只包括內容。</div>
<div class="box border-box">Border-box: 寬和高包括 padding 和邊框。</div>

代碼解釋:

  • .box: 所有框的基本樣式,包括 padding、邊框和尺寸
  • .content-box: 使用 box-sizing: content-box 的元素,寬和高僅包括內容
  • .border-box: 使用 box-sizing: border-box 的元素,寬和高包括 padding 和邊框

4.2 box-sizing 對佈局的影響

內容模型 (Content-box)

當使用 box-sizing: content-box; 時,padding 和邊框會加到元素的總寬度和高度中。 這可能需要在計算尺寸和定位元素時進行額外考慮。

使用範例

在這種情況下,元素的總寬度將是 200px + 20px (padding) * 2 + 5px (border) * 2 = 250px, 總高度將是 100px + 20px (padding) * 2 + 5px (border) * 2 = 150px。

CSS
.content-box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box content-box">Content-box: 寬和高只包括內容。</div>

邊框模型 (Border-box)

當使用 box-sizing: border-box; 時,padding 和邊框包含在元素的指定寬度和高度中。 這簡化了計算和管理元素的尺寸,特別是在創建自適應佈局時。

使用範例:

CSS
.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
}
HTML
<div class="box border-box">Border-box: 寬和高包括 padding 和邊框。</div>

4.3 創建自適應佈局

使用 box-sizing: border-box; 可以簡化自適應佈局的創建,因為 元素的尺寸包括 padding 和邊框,避免了意外的溢出。

使用範例:

CSS
* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #f4f4f4;
}

.item {
  flex: 1 1 calc(33.333% - 20px);
  padding: 20px;
  border: 5px solid #3498db;
  background-color: #fff;
}
HTML
<div class="container">
  <div class="item">元素 1</div>
  <div class="item">元素 2</div>
  <div class="item">元素 3</div>
  <div class="item">元素 4</div>
  <div class="item">元素 5</div>
  <div class="item">元素 6</div>
</div>

代碼解釋:

  • * { box-sizing: border-box; }: 將邊框模型應用到頁面上的所有元素以簡化尺寸管理
  • .container: 具有自適應佈局的 Flex 容器
  • .item: Flex 元素,均勻分配寬度並包含 padding 和 border 在總寬度中

4.4 固定尺寸與內部間隙

使用 box-sizing: border-box; 可以輕鬆設置具有內部間隙元素的固定尺寸,而不需擔心溢出。

使用範例:

CSS
.fixed-size {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #2ecc71;
  background-color: #ecf0f1;
  text-align: center;
  line-height: 150px; /* 垂直居中文字 */
}
HTML
<div class="fixed-size">
  固定尺寸
</div>

代碼解釋:

  • .fixed-size: 大小為 300x150 像素的固定尺寸元素,包括 padding 和 border,這樣就能準確控制其尺寸
1
任務
Frontend SELF TW,  等級 16課堂 4
上鎖
box-sizing模型
box-sizing模型
1
任務
Frontend SELF TW,  等級 16課堂 4
上鎖
固定尺寸
固定尺寸
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言