CSS 每日一练 ✨

1. 基础选择器样式 🌱

/* 通配选择器 - 重置所有元素的内外边距 */
* {
  margin: 0;   /* 外边距归零 */
  padding: 0;  /* 内边距归零 */
  box-sizing: border-box; /* 盒模型计算包含边框 */
}

/* 类选择器 - 为特殊元素添加金色高光 */
.highlight {
  color: #FFD700;  /* 金色文字 */
  text-shadow: 0 0 5px rgba(255,215,0,0.3); /* 柔光效果 */
}

2. 布局的艺术 🎨

/* 弹性布局容器 - 创造和谐的排列 */
.container {
  display: flex;          /* 启用弹性布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: stretch;   /* 子项等高拉伸 */
  gap: 1rem;             /* 元素间呼吸间隙 */
}

/* 网格布局 - 构建精准的视觉矩阵 */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  grid-auto-rows: minmax(100px, auto);  /* 行高自适应 */
}

3. 动效之美 ✨

/* 悬停动画 - 让交互充满生命力 */
.btn {
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
}

.btn:hover {
  transform: translateY(-3px);  /* 轻盈上浮 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 悬浮投影 */
}

/* 关键帧动画 - 创造视觉叙事 */
@keyframes pulse {
  0% { transform: scale(1); }      /* 初始状态 */
  50% { transform: scale(1.05); }  /* 呼吸膨胀 */
  100% { transform: scale(1); }    /* 回归平静 */
}

4. 响应式设计 🌐

/* 媒体查询 - 适应不同视窗尺寸 */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;       /* 移动端全宽显示 */
    position: static;  /* 解除固定定位 */
  }

  /* 移动端导航优化 */
  .nav-item {
    font-size: 1.2rem;  /* 增大可点击区域 */
    padding: 0.8rem;    /* 舒适的触控间距 */
  }
}

5. 现代CSS特性 🚀

/* 变量定义 - 维护统一的视觉语言 */
:root {
  --primary-color: #4361ee;  /* 品牌主色 */
  --text-light: #f8f9fa;     /* 浅色文本 */
}

/* 使用CSS变量 */
.header {
  background-color: var(--primary-color);  /* 应用主色 */
  color: var(--text-light);               /* 确保可读性 */
}

/* 剪切路径 - 创造不规则形状 */
.clip-art {
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%); /* 斜切效果 */
}