正在加载...
CSS 属性完整参考手册
本 CSS 属性完整参考手册旨在为开发者提供一站式查阅工具，覆盖所有现代 CSS 属性及其用法。无论是布局、盒模型、边框、背景、排版，还是 Flexbox 与 Grid，本指南均提供准确语法、实用示例及浏览器兼容信息。开发者可以在编码时快速查找属性、理解功能，并参考示例实现高效、规范的样式开发。指南逻辑清晰，以类别分组，便于快速检索，适合日常开发、项目维护及学习参考，帮助提升 CSS 使用效率与代码质量。
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | 控制元素显示类型 | display: flex | 所有浏览器 |
| position | position: value | 设置定位方式 | position: absolute | 所有浏览器 |
| top | top: value | 垂直偏移 | top: 10px | 所有浏览器 |
| right | right: value | 水平偏移 | right: 20px | 所有浏览器 |
| bottom | bottom: value | 底部偏移 | bottom: 10px | 所有浏览器 |
| left | left: value | 左侧偏移 | left: 20px | 所有浏览器 |
| z-index | z-index: number | 堆叠顺序 | z-index: 999 | 所有浏览器 |
| float | float: value | 元素浮动方向 | float: left | 所有浏览器 |
| clear | clear: value | 清除浮动 | clear: both | 所有浏览器 |
| overflow | overflow: value | 内容溢出处理 | overflow: hidden | 所有浏览器 |
| overflow-x | overflow-x: value | 水平溢出 | overflow-x: scroll | 所有浏览器 |
| overflow-y | overflow-y: value | 垂直溢出 | overflow-y: auto | 所有浏览器 |
| visibility | visibility: value | 元素可见性 | visibility: hidden | 所有浏览器 |
| clip | clip: rect() | 裁剪元素内容 | clip: rect(0,50px,50px,0) | 所有浏览器 |
| vertical-align | vertical-align: value | 垂直对齐 | vertical-align: middle | 所有浏览器 |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | 元素宽度 | width: 300px | 所有浏览器 |
| height | height: value | 元素高度 | height: 200px | 所有浏览器 |
| max-width | max-width: value | 最大宽度 | max-width: 100% | 所有浏览器 |
| min-width | min-width: value | 最小宽度 | min-width: 200px | 所有浏览器 |
| max-height | max-height: value | 最大高度 | max-height: 500px | 所有浏览器 |
| min-height | min-height: value | 最小高度 | min-height: 100px | 所有浏览器 |
| margin | margin: value | 外边距 | margin: 20px | 所有浏览器 |
| margin-top | margin-top: value | 上外边距 | margin-top: 10px | 所有浏览器 |
| margin-right | margin-right: value | 右外边距 | margin-right: 15px | 所有浏览器 |
| margin-bottom | margin-bottom: value | 下外边距 | margin-bottom: 10px | 所有浏览器 |
| margin-left | margin-left: value | 左外边距 | margin-left: 15px | 所有浏览器 |
| padding | padding: value | 内边距 | padding: 15px | 所有浏览器 |
| padding-top | padding-top: value | 上内边距 | padding-top: 10px | 所有浏览器 |
| padding-right | padding-right: value | 右内边距 | padding-right: 20px | 所有浏览器 |
| padding-bottom | padding-bottom: value | 下内边距 | padding-bottom: 10px | 所有浏览器 |
| padding-left | padding-left: value | 左内边距 | padding-left: 20px | 所有浏览器 |
| box-sizing | box-sizing: value | 盒模型计算方式 | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | 完整边框 | border: 2px solid #000 | 所有浏览器 |
| border-width | border-width: value | 边框厚度 | border-width: 3px | 所有浏览器 |
| border-style | border-style: value | 边框样式 | border-style: dashed | 所有浏览器 |
| border-color | border-color: value | 边框颜色 | border-color: red | 所有浏览器 |
| border-top | border-top: width style color | 上边框 | border-top: 1px solid blue | 所有浏览器 |
| border-right | border-right: width style color | 右边框 | border-right: 2px dotted red | 所有浏览器 |
| border-bottom | border-bottom: width style color | 下边框 | border-bottom: 3px double green | 所有浏览器 |
| border-left | border-left: width style color | 左边框 | border-left: 1px solid gray | 所有浏览器 |
| border-radius | border-radius: value | 圆角 | border-radius: 10px | IE9+ |
| outline | outline: width style color | 元素轮廓 | outline: 2px solid red | 所有浏览器 |
| outline-offset | outline-offset: value | 轮廓偏移 | outline-offset: 5px | 所有浏览器 |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | 完整背景 | background: #fff url() no-repeat center | 所有浏览器 |
| background-color | background-color: value | 背景颜色 | background-color: #ff0000 | 所有浏览器 |
| background-image | background-image: url() | 背景图像 | background-image: url('bg.jpg') | 所有浏览器 |
| background-repeat | background-repeat: value | 图像重复 | background-repeat: no-repeat | 所有浏览器 |
| background-position | background-position: value | 图像位置 | background-position: center top | 所有浏览器 |
| background-size | background-size: value | 图像缩放 | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | 背景滚动 | background-attachment: fixed | 所有浏览器 |
| background-blend-mode | background-blend-mode: value | 混合模式 | background-blend-mode: multiply | 现代浏览器 |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | 完整字体声明 | font: bold 16px/1.5 Arial | 所有浏览器 |
| font-family | font-family: name | 字体类型 | font-family: 'Arial', sans-serif | 所有浏览器 |
| font-size | font-size: value | 字体大小 | font-size: 18px | 所有浏览器 |
| font-weight | font-weight: value | 字体粗细 | font-weight: bold | 所有浏览器 |
| font-style | font-style: value | 字体样式 | font-style: italic | 所有浏览器 |
| line-height | line-height: value | 行高 | line-height: 1.6 | 所有浏览器 |
| text-align | text-align: value | 水平对齐 | text-align: center | 所有浏览器 |
| text-decoration | text-decoration: value | 文本装饰 | text-decoration: underline | 所有浏览器 |
| text-transform | text-transform: value | 文本转换 | text-transform: uppercase | 所有浏览器 |
| text-overflow | text-overflow: value | 文本溢出 | text-overflow: ellipsis | IE6+ |
| white-space | white-space: value | 空白处理 | white-space: nowrap | 所有浏览器 |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | 启用 Flexbox | display: flex | IE10+ |
| flex-direction | flex-direction: value | 主轴方向 | flex-direction: column | IE10+ |
| justify-content | justify-content: value | 主轴对齐 | justify-content: space-between | IE10+ |
| align-items | align-items: value | 交叉轴对齐 | align-items: center | IE10+ |
| align-self | align-self: value | 单个项目对齐 | align-self: flex-end | IE10+ |
| order | order: number | 项目顺序 | order: 2 | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | 启用网格 | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | 列尺寸 | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | 行尺寸 | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | 网格间距 | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | 单元格水平对齐 | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | 单元格垂直对齐 | align-items: center | IE10+ (-ms-) |
| place-items | place-items: align justify | 对齐简写 | place-items: center | 现代浏览器 |
Quick Examples
css
CSS Code
/* 布局示例 */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* 排版示例 */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* 动画示例 */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}
---最佳实践与提示：
- 始终在 font-family 中指定后备字体
- 使用相对单位（em, rem, %）提高响应性
- 尽量减少 !important 的使用
- 在不同浏览器测试 CSS 属性，尤其是新属性
- 使用简写属性减少文件大小
- 考虑复杂动画和滤镜的性能影响
- 使用在线验证工具检查语法错误
- 使用 CSS 自定义属性（变量）保持代码可维护
- 为实验性属性添加浏览器前缀
- 将相关属性分组，便于代码组织
🧠 测试您的知识
准备开始
Reference Knowledge Check
测试你对 CSS 属性及用法的掌握情况
3
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部