寒假生活指导 05

CSS知识点：

1. 选择器与优先级

   • 基础选择器：元素、类、ID（优先级：!important > 行内 > ID > 类 > 元素）
   • 组合选择器：后代（空格）、子元素（>）、相邻兄弟（+）
   • 伪类（:hover）与伪元素（::before）

2. 盒模型

   • 标准盒模型：width=内容宽度，box-sizing: content-box
   • 替代盒模型：width=内容+内边距+边框，box-sizing: border-box

3. 布局系统

   • Flex：一维布局，主轴/交叉轴对齐（justify-content, align-items）
   • Grid：二维布局，定义行/列（grid-template-columns）
   • 定位：relative（相对自身偏移）、absolute（相对最近非静态父级）、fixed（视口定位）

4. 响应式设计

   • 媒体查询：@media (max-width: 768px)
   • 单位：rem（根字体相对）、vw/vh（视口比例）

5. 动画与过渡

   • transition: 属性 时长 缓动函数（如all 0.3s ease）
   • @keyframes定义动画序列，animation调用

6. 变量与复用

   • 自定义属性：--main-color: #333;，使用var(--main-color)
   • 预处理器（如Sass）支持嵌套、混合等高级功能