前端設計 — 盒模型(Box Model)及Display屬性?

⭐ 盒模型(Box Model)

🔖 盒模型定義

瀏覽器將每一個標籤元素都視為一個矩形的「盒模型」，而每一個盒模型都由四個屬性組成，由內而外分別為內容(content)、內距(padding)、邊界(border)及外距(margin)

盒模型的組成屬性

屬性(property)	說明
內容(content)	擁有「真實的內容」，例如文字、圖片或影片，我們可以依據這些真實內容來決定內容的大小 也可依據 width * height 設定內容大小
內距(padding)
邊界(border)
外距(margin)

🔖 Box-sizing 屬性及屬性值

• CSS的 box-sizing 屬性 (property) 定義元素寬、高的計算方式，也就是元素的寬、高是否要將內距和邊界計算進去
• CSS 語法

  box-sizing: value;

• Box-sizing 的屬性值

  屬性值(value)	說明	是否包含內距和邊界
  content-box	為box-sizing元素的預設值 (default)，只將內容納為寬、高計算	否
  border-box	元素寬、高計算包含: 內容、內距、邊界	是

🔖 margin的塌陷現象

⭐ Display屬性

🔎 參考資料來源

📌 MDN: https://developer.mozilla.org/zh-TW/

📌 W3SCHOOLS: https://www.w3schools.com/cssref/css3_pr_box-sizing.php

📌

📌