CSS 属性概述
CSS 属性用于控制 HTML 元素的样式和行为，包括布局、颜色、字体、动画等。以下是常用的 CSS 属性分类及示例：
布局相关属性
display: 控制元素的显示方式，如block、inline、flex、grid。position: 定义元素的定位方式，如static、relative、absolute、fixed。float: 使元素向左或向右浮动，如left、right、none。margin/padding: 设置元素的外边距和内边距。width/height: 定义元素的宽度和高度。
颜色与背景属性
color: 设置文本颜色，如color: #ff0000;。background-color: 定义背景颜色。background-image: 设置背景图片，如background-image: url('image.png');。background-size: 控制背景图片大小，如cover、contain。
字体与文本属性
font-family: 定义字体类型，如font-family: Arial, sans-serif;。font-size: 设置字体大小，如font-size: 16px;。font-weight: 控制字体粗细，如bold、normal。text-align: 对齐文本，如left、center、right。line-height: 设置行高。
边框与阴影属性
border: 定义边框样式，如border: 1px solid #000;。border-radius: 设置圆角边框，如border-radius: 5px;。box-shadow: 添加阴影效果，如box-shadow: 2px 2px 5px rgba(0,0,0,0.3);。
动画与过渡属性
transition: 控制属性变化的过渡效果，如transition: all 0.3s ease;。animation: 定义动画效果，如animation: fade 2s infinite;。transform: 实现元素的变形，如rotate、scale、translate。
响应式设计属性
@media: 媒体查询，根据屏幕尺寸应用不同样式。min-width/max-width: 定义响应式断点。
代码示例
以下是一个简单的 CSS 示例，展示常见属性的使用：
css
.box {
display: flex;
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
border-radius: 10px;
margin: 20px;
padding: 10px;
box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.box:hover {
transform: scale(1.05);
}浏览器兼容性
不同 CSS 属性在不同浏览器中的支持程度可能有所差异。可以通过工具如 Can I use 查询兼容性。