CSS标签

盒子模型：

• margin-top, margin-right, margin-bottom, margin-left: 设置元素各方向的外边距。
• padding-top, padding-right, padding-bottom, padding-left: 设置元素各方向的内边距。
• border-top, border-right, border-bottom, border-left: 设置元素各方向的边框。

布局：

• display: 设置元素的显示方式，如none、block、inline、inline-block等。
• visibility: 设置元素是否可见，可取值为visible和hidden。
• float: 设置元素浮动，可以取值left、right、none等。
• clear: 清除浮动影响，可取值left、right、both、none。
• position: 设置元素的定位方式，如static、relative、absolute、fixed。
• z-index: 设置元素的堆叠顺序。

响应式设计：

• @media: 在不同屏幕宽度条件下应用不同的样式。
• max-width, min-width: 设置元素的最大宽度和最小宽度。
• max-height, min-height: 设置元素的最大高度和最小高度。

字体和文本：

• text-transform: 设置文本大小写，如uppercase、lowercase、capitalize。
• letter-spacing: 设置字符间距。
• word-spacing: 设置单词间距。
• white-space: 设置空白字符的处理方式，如normal、nowrap、pre。
• text-overflow: 设置文本溢出时的显示方式，如ellipsis省略号。

背景和边框样式：

• background-size: 设置背景图片大小，如cover、contain。
• border-radius: 设置圆角边框。
• box-shadow: 设置盒子阴影效果。

动画和过渡：

• @keyframes: 定义动画的关键帧。
• animation-name, animation-duration, animation-delay, animation-iteration-count, animation-timing-function, animation-fill-mode: 控制动画效果的属性。

其他：

• cursor: 设置鼠标指针样式，如pointer、default、crosshair。
• user-select: 设置用户是否能选中文本，如none、text。
• overflow: 设置元素内容溢出时的处理方式，如visible、hidden、auto。

颜色和渐变：

• color: 设置文本颜色。
• background-color: 设置背景颜色。
• linear-gradient, radial-gradient: 创建线性渐变和径向渐变背景。

列表和计数：

• list-style-type: 设置列表项前的符号类型，如disc、decimal、square。
• list-style-image: 使用图像作为列表项前的符号。

表格样式：

• table-layout: 设置表格布局算法，如fixed、auto。
• border-collapse: 设置表格边框合并方式，如collapse、separate。

字体图标：

• font-awesome, Material Icons: 使用字体图标库为元素添加图标。

弹性布局：

• display: flex: 创建弹性容器，使用弹性布局。
• flex-direction: 设置主轴方向，如row、column、row-reverse、column-reverse。
• justify-content: 设置主轴上的元素对齐方式，如flex-start、center、flex-end、space-between。
• align-items: 设置侧轴上的元素对齐方式，如flex-start、center、flex-end。

网格布局：

• display: grid: 创建网格容器，使用网格布局。
• grid-template-columns, grid-template-rows: 定义网格的列和行。
• grid-column, grid-row: 设置元素在网格中的位置。

过渡和变换：

• transition-property, transition-duration, transition-timing-function, transition-delay: 设置过渡效果的属性。
• transform: 应用变换效果，如旋转、缩放、平移。
• transform-origin: 设置变换的原点。

定制滚动条样式：

• overflow: scroll: 创建带有滚动条的容器。
• scrollbar-width, scrollbar-color: 设置滚动条的宽度和颜色。

Web字体：

• @font-face: 引入自定义字体。
• font-family: 设置元素的字体族。

动画：

• @keyframes: 创建动画序列，定义动画的关键帧。
• animation: 应用动画效果，包括名称、持续时间、延迟等属性。

伪类和伪元素：

• :hover, :active, :focus: 鼠标悬停、激活、获取焦点时的样式。
• ::before, ::after: 创建元素的伪元素，用于添加额外的内容。

媒体查询：

• @media: 根据不同的屏幕尺寸、设备类型等条件，应用不同的样式。
• max-width, min-width, max-height, min-height: 设置屏幕宽度或高度的范围条件。

响应式设计：

• 弹性图片：通过max-width: 100%保证图片在不同屏幕上自适应。
• 字体响应：使用rem、em等相对单位，使字体根据屏幕大小调整。

变量（CSS变量）：

• --variable-name: 定义和使用自定义的CSS变量，提供可重复使用的值。

滤镜：

• filter: 应用视觉效果，如模糊、亮度、对比度调整。

混合模式：

• mix-blend-mode: 控制元素的混合效果，让元素与其背景交互。

阴影效果：

• box-shadow: 添加元素的投影效果，可以实现阴影、发光等效果。

字间距和行间距：

• letter-spacing: 调整字母之间的距离。
• line-height: 设置行高，影响文本的垂直间距。

多列布局：

• column-count, column-width, column-gap: 创建多列布局。

自适应布局：

• display: inline-block, display: inline-flex: 创建自适应的块级元素或弹性容器。

触发滚动效果：

• scroll-behavior: 控制页面滚动时的平滑滚动效果。