CSS 屬性速查

← ToolBox / CSS 屬性速查

📐 CSS Properties

📐 工作原理與說明
CSS 屬性速查手冊。
  • 分類：佈局（display/flex/grid/position）、盒模型、排版、顏色與背景、變換與動畫。
  • 要素：每項含取值語法、初始值、是否可繼承與適用元素。
  • 繼承性：font-size、color 等可繼承；margin、padding、border 不可繼承。
  • 用途：快速查閱屬性含義與合法取值，減少文件往返。

Browse a CSS properties reference in your browser — syntax, values and examples for each property.

常見屬性預設：

📏 CSS 單位參考

單位名稱說明
px畫素絕對單位，1px = 1/96 英寸
em相對父元素字型相對於父元素字型大小
rem相對根元素字型相對於 html 元素字型大小
vw視口寬度1vw = 1% 視口寬度
vh視口高度1vh = 1% 視口高度
vmin視口最小值vw 和 vh 中較小者
vmax視口最大值vw 和 vh 中較大者
%百分比相對於父元素
pt磅1pt = 1/72 英寸
cm釐米1cm = 10mm
mm毫米絕對單位
in英寸1in = 96px = 2.54cm
pc派卡1pc = 12pt
exx 字高相對當前字型 x 字元高度
ch字元寬度相對 0 字元寬度
fr分數單位Grid 佈局專用
deg度角度單位，0-360deg
s / ms秒 / 毫秒時間單位，用於動畫

📚 深度解析：CSS 屬性速查

💡 常見使用場景

  • 查閱屬性取值與相容性。
  • 確認某個屬性在目標瀏覽器的支援情況與字首需求，再決定是否加 -webkit- 等字首或換用替代方案。
查
`display: grid` 二維佈局；`gap` 設間距。

❓ 常見問題（FAQ）

flex 與 grid？
一維用 flex，二維用 grid。
為什麼同一個屬性有時要加字首？
瀏覽器在標準化過程中會先用帶字首的形式實現實驗特性。現代瀏覽器大多已直接支援標準屬性，只有較老版本或少數仍在草案期的屬性需要字首。建議按 Can I Use 查詢目標版本，並讓構建工具按 browserslist 自動注入，而非手寫。
⚠️ 使用說明與注意事項

🔗 相關工具

📄 .properties 解析器 - 免費開發工具，properties 解析器 | ToolBox免費線上工具箱.properties 解析器 💻 AST抽象語法樹檢視器 - 線上解析JavaScript程式碼生成AST樹形結構，支援節點 | ToolBox免費線上工具箱AST 抽象語法樹檢視器 🧹 CSS 壓縮/美化工具 - 免費開發工具，CSS 壓縮/格式化/美化 | ToolBox免費線上工具箱CSS 壓縮/格式化/美化 🏋️ CSS 格式化 - 免費開發工具，線上CSS 格式化 | ToolBox免費線上工具箱CSS 格式化 ✨ Cron 表示式生成器 - 免費開發工具，線上Cron 表示式生成器 | ToolBox免費線上工具箱⏰ Cron 表示式生成器 🏋️ GraphQL 格式化 - 免費開發工具，線上GraphQL 格式化 | ToolBox免費線上工具箱◈ GraphQL 格式化
📖關於「CSS 屬性速查」 ▼

📝工具簡介

CSS 屬性速查。專為開發者打造的線上工具，純前端執行，程式碼不離開瀏覽器。