常见CSS属性

一、布局类 (Layout)

属性	作用描述	常用值示例
display	定义元素显示类型	block, inline, flex, grid, none
position	定位方式	static, relative, absolute, fixed, sticky
top/right/bottom/left	定位偏移量	10px, 50%, auto
float	元素浮动方向	left, right, none
clear	清除浮动影响	both, left, right
z-index	堆叠顺序	1, -1

Flexbox 布局 | flex-direction | 主轴方向 | row, column, row-reverse | | flex-wrap | 换行方式 | nowrap, wrap | | justify-content | 主轴对齐方式 | flex-start, center, space-between | | align-items | 交叉轴对齐 | stretch, center, baseline |

Grid 布局 | grid-template-columns | 定义网格列宽 | 100px 1fr, repeat(3, 1fr) | | grid-template-rows | 定义网格行高 | auto, minmax(100px, auto) | | grid-gap | 网格间距 | 10px 20px | | grid-column/grid-row | 项目位置 | 1 / 3, span 2 |

二、盒模型 (Box Model)

属性	作用描述	常用值示例
width/height	内容区尺寸	100px, 50%, auto
padding	内边距	10px 5px, 1em 2em 3em
margin	外边距	auto, 10%, 0 20px
border	边框简写	1px solid #000
box-sizing	盒模型计算方式	content-box, border-box

三、排版类 (Typography)

属性	作用描述	常用值示例
font-family	字体类型	'Arial', sans-serif
font-size	字号	16px, 1.2rem, larger
font-weight	字重	normal, bold, 700
line-height	行高	1.5, 24px
text-align	水平对齐	left, center, justify
text-decoration	文本装饰	underline, line-through none
text-transform	文本大小写转换	uppercase, capitalize
letter-spacing	字符间距	2px, -0.1em
white-space	空白处理方式	normal, nowrap, pre

四、视觉效果 (Visual Effects)

属性	作用描述	常用值示例
background	背景简写	#fff url(bg.jpg) no-repeat center
background-color	背景颜色	rgba(255,0,0,0.5)
background-image	背景图片	url('image.jpg'), linear-gradient(...)
border-radius	圆角半径	10px, 50%
box-shadow	盒子阴影	2px 2px 5px rgba(0,0,0,0.3)
opacity	不透明度	0.5 (50% 透明)
transform	2D/3D变换	rotate(45deg), translateX(100px)
filter	视觉滤镜	blur(5px), grayscale(100%)

五、动画与过渡 (Animation)

属性	作用描述	常用值示例
transition	过渡效果	all 0.3s ease-in
animation	动画简写	slide 2s infinite
@keyframes	定义关键帧动画	(需配合动画名称使用)

六、响应式设计 (Responsive)

属性	作用描述	常用值示例
@media	媒体查询条件	(max-width: 768px)
min-width/max-width	媒体查询尺寸范围	600px, 1024px

七、其他重要属性

属性	作用描述	常用值示例
cursor	鼠标指针样式	pointer, help, not-allowed
overflow	溢出内容处理	visible, hidden, scroll
visibility	元素可见性	visible, hidden
clip-path	裁剪路径	circle(50%), polygon(...)
will-change	性能优化提示	transform, opacity

八、完整学习资源

获取完整的属性列表和最新规范，推荐访问：

1. MDN Web Docs：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
2. CSS Tricks Almanac：https://css-tricks.com/almanac/
3. W3C CSS 规范：https://www.w3.org/Style/CSS/