1. 层叠上下文与定位

掌握 position 属性（static, relative, absolute, fixed, sticky）的深层原理，理解 z-index 如何构建分层结构。

CSS3

⚠️ 注意：position: absolute 需要相对定位的祖先元素作为参考系，否则会基于初始包含块定位。

2. Flexbox与Grid布局

  • 📌 使用 display: flex 实现弹性布局，灵活控制子元素间距与对齐
  • 📌 display: grid 创建网格布局，通过 grid-template-columns 定义列分布
Flexbox_布局

📚 扩展阅读：CSS布局指南

3. CSS变量与主题定制

通过 :root 定義全局变量（如 --primary-color），在子元素中使用 var() 动态调用。

CSS_Variables

4. 动画与过渡效果

  • ✅ transition 实现属性渐变（如 opacity, transform）
  • ✅ @keyframes 定义自定义动画，结合 animation 属性控制播放
Gradient_Background

5. 响应式设计实践

利用 media query 实现多设备适配，结合 vw/vh 单位优化布局。

Responsive_Design

🌐 实战案例：响应式布局示例

6. 高级选择器技巧

  • 🔍 :nth-child 定位特定子元素
  • 🔍 :not() 排除匹配项
  • 🔍 attr() 动态获取属性值
    :center:CSS_Selectors