CSS 常用标签与属性详解
文本对齐控制
CSS 中的 text-align 属性用于控制块级元素内文本的水平对齐方式。常用值包括：
left：默认值，左对齐。center：居中对齐。right：右对齐。justify：两端对齐，除最后一行外，每行左右边缘紧贴容器。
尺寸调整
使用 width 和 height 属性可设置元素的宽高，支持像素（px）、百分比（%）和相对单位（em）。
img {
width: 220px;
height: 20px;
}文本样式标签
<strong>：加粗文本，等价于font-weight: bold;。<u>：添加下划线，对应text-decoration: underline;。<em>：强调内容，通常显示为斜体（font-style: italic;）。<s>：添加删除线，样式为text-decoration: line-through;。<hr>：创建水平分隔线，自闭合标签，常用于内容分段。
背景与字体属性
background-color：设置元素背景色，支持rgb()、rgba()等格式。font-size：定义文字大小，如32px、1.5em。font-weight：控制字体粗细，如normal、bold、或数值700。
视觉效果增强
box-shadow：为元素添加阴影，参数顺序为：水平偏移、垂直偏移、模糊半径、扩展半径、颜色。opacity：设置透明度，取值范围0（完全透明）到1（完全不透明）。text-transform：改变文本大小写，如uppercase、lowercase、capitalize。line-height：调节行间距，影响文本垂直排列。
布局定位机制
position: relative：相对定位，基于自身原位置偏移，不影响其他元素布局。position: absolute：绝对定位，相对于最近的定位祖先元素，脱离文档流。position: fixed：固定定位，相对于视口，滚动时位置不变。float：使元素向左或右浮动，常用于图文混排。z-index：控制重叠元素的堆叠顺序，数值越大越靠前。
居中与响应式布局
通过设置 margin: auto 可实现块级元素水平居中，适用于宽度固定的元素。
div {
width: 50%;
margin: 0 auto;
}色彩理论基础
- 互补色：在色环上相对的两种颜色，如红与青、绿与品红。
- 三原色光模型（RGB）：红、绿、蓝三色叠加生成其他颜色。
- 三次色：由原色与二次色混合产生，如橙色（红+黄）、紫色（红+蓝）。
颜色表达方式
CSS 支持 hsl() 格式，以色相（0–360°）、饱和度（0%–100%）、亮度（0%–100%）表示颜色。
hsl(120, 100%, 50%) /* 绿色 */渐变与纹理
linear-gradient()：创建线性渐变背景。repeating-linear-gradient()：重复渐变，可用于制作条纹图案。- 通过
background-image: url()添加细微纹理，提升视觉层次。
变换与动画
transform: scale()：缩放元素大小，如scale(1.5)。transform: skewX()：沿 X 轴倾斜元素。transform: skewY()：沿 Y 轴倾斜元素。transform: rotate()：旋转元素。
创建特殊形状
利用 border-radius、box-shadow 及伪元素 ::before、::after 可实现心形、新月等图形。
关键帧动画系统
通过 @keyframes 定义动画过程，配合 animation 属性实现动态效果。
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}动画控制属性
animation-duration：动画持续时间。animation-iteration-count：动画循环次数，infinite表示无限循环。animation-fill-mode：动画结束后保持状态，如forwards。animation-timing-function：控制动画速度曲线，支持ease、linear、cubic-bezier()等。
贝塞尔曲线进阶
使用 cubic-bezier(x1, y1, x2, y2) 自定义动画速度变化，实现更自然的运动效果。
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);