css基础能力：精准控制样式

1. 选择器与优先级

• 核心选择器：

• 元素选择器（div）、类选择器（.btn）、ID选择器（#header）

• 属性选择器（[type="text"]）、伪类选择器（:hover、:nth-child(2n)）

• 伪元素选择器（::before、::after，用于添加装饰性内容）

• 优先级规则：

• 优先级计算：ID > 类/属性/伪类 > 元素/伪元素（!important 可强制覆盖，但慎用）

• 示例：#nav .active（优先级高于 .nav-item.active）

2. 盒模型与尺寸控制

• 盒模型组成：

• content（内容）→ padding（内边距）→ border（边框）→ margin（外边距）

• 关键属性：box-sizing: border-box（宽度包含内边距和边框，避免布局计算混乱）

• 尺寸控制：

• 固定值（width: 200px）、百分比（width: 50%）、视口单位（vw/vh）

• min-width/max-width 防止元素溢出或压缩

3. 文本与字体

• 文本样式：

• 字体：font-family（字体栈）、font-size（rem/em 响应式单位）

• 颜色：十六进制（#ff0000）、RGB/RGBA（rgba(255, 0, 0, 0.5)）

• 排版：line-height（行高）、letter-spacing（字间距）、text-align（对齐）

• 字体优化：

• 自定义字体：@font-face 引入（需注意性能开销）

• 字体图标：使用 IconFont 或 SVG 替代图片（减少HTTP请求）