CSS 属性速查
按分类列出完整 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 |
ex | x 字高 | 相对当前字体 x 字符高度 |
ch | 字符宽度 | 相对 0 字符宽度 |
fr | 分数单位 | Grid 布局专用 |
deg | 度 | 角度单位，0-360deg |
s / ms | 秒 / 毫秒 | 时间单位，用于动画 |
📚 深度解析：CSS 属性速查
💡 常见使用场景
- 查阅属性取值与兼容性。
- 确认某个属性在目标浏览器的支持情况与前缀需求，再决定是否加 -webkit- 等前缀或换用替代方案。
查
`display: grid` 二维布局；`gap` 设间距。
❓ 常见问题（FAQ）
- flex 与 grid？
- 一维用 flex，二维用 grid。
- 为什么同一个属性有时要加前缀？
- 浏览器在标准化过程中会先用带前缀的形式实现实验特性。现代浏览器大多已直接支持标准属性，只有较老版本或少数仍在草案期的属性需要前缀。建议按 Can I Use 查询目标版本，并让构建工具按 browserslist 自动注入，而非手写。
⚠️ 使用说明与注意事项
- 本工具纯前端运行，数据不会上传到服务器
- 建议在主流浏览器（Chrome/Safari/Firefox/Edge）中使用
- 计算结果仅供参考，请以实际应用场景为准
▼
工具简介
CSS 属性速查。专为开发者打造的在线工具，纯前端运行，代码不离开浏览器。