CSS 提供了丰富的属性来控制页面的样式和布局。以下是一些常用的 CSS 属性分类及其说明，帮助你快速了解如何使用它们：

1. 布局相关

用于控制元素的布局方式。

display：定义元素的显示方式。

block：块级元素。

inline：行内元素。

flex：弹性布局。

grid：网格布局。

none：隐藏元素。

position：定义元素的定位方式。

static：默认值，无特殊定位。

relative：相对定位。

absolute：绝对定位。

fixed：固定定位。

sticky：粘性定位。

flex 相关属性：

flex-direction：主轴方向（row, column）。

justify-content：主轴对齐方式（center, space-between 等）。

align-items：交叉轴对齐方式（center, flex-start 等）。

gap：子元素之间的间距。

grid 相关属性：

grid-template-columns：定义列的宽度。

grid-template-rows：定义行的高度。

grid-gap：网格间距。

2. 盒模型相关

用于控制元素的尺寸、边距和填充。

width 和 height：设置元素的宽度和高度。

margin：元素外边距。

padding：元素内边距。

border：边框样式。

border-width：边框宽度。

border-style：边框样式（solid, dashed 等）。

border-color：边框颜色。

box-sizing：盒模型计算方式。

content-box：仅包含内容区域。

border-box：包含内容、内边距和边框。

3. 文本相关

用于控制文本的外观和行为。

font-family：字体族（如 Arial, sans-serif）。

font-size：字体大小。

font-weight：字体粗细（如 bold, 400）。

color：文字颜色。

text-align：文本对齐方式（left, center, right）。

text-decoration：文本装饰（如 underline, none）。

line-height：行高。

letter-spacing：字母间距。

word-spacing：单词间距。

4. 背景相关

用于设置背景样式。

background-color：背景颜色。

background-image：背景图片。

background-repeat：背景图片是否重复（no-repeat, repeat）。

background-size：背景图片大小（如 cover, contain）。

background-position：背景图片位置（如 center, top left）。

5. 边框与阴影

用于美化元素的边框和添加阴影效果。

border-radius：圆角半径。

box-shadow：盒子阴影（如 2px 2px 5px rgba(0, 0, 0, 0.3)）。

outline：轮廓线（通常用于表单元素）。

6. 动画与过渡

用于实现动态效果。

transition：平滑过渡效果。

示例：transition: background-color 0.3s ease;

animation：关键帧动画。

示例：animation: fadeIn 2s infinite;

transform：变换效果。

translate(x, y)：平移。

rotate(angle)：旋转。

scale(x, y)：缩放。

7. 响应式设计

用于适配不同设备和屏幕尺寸。

@media 查询：根据屏幕条件应用样式。

示例：@media (max-width: 768px) { ... }

min-width 和 max-width：限制元素的最小或最大宽度。

vh 和 vw：视口单位（1% 的视口高度/宽度）。

rem 和 em：基于根字体大小的单位。

8. 鼠标与交互

用于增强用户交互体验。

cursor：鼠标悬停时的指针样式（如 pointer, default）。

user-select：是否允许用户选择文本（如 none, text）。

pointer-events：是否响应鼠标事件（如 none, auto）。

9. 其他常用属性

opacity：透明度（0 到 1）。

z-index：元素堆叠顺序。

visibility：元素可见性（visible, hidden）。

overflow：溢出内容处理（hidden, scroll, auto）。

white-space：空白符处理（如 nowrap, pre-wrap）。

10. CSS 变量

用于定义可复用的变量。

Css

:root {

  --primary-color: #4CAF50;

  --spacing-unit: 8px;

}

.button {

  background-color: var(--primary-color);

  padding: var(--spacing-unit);

}