每日CSS一练 ✨

1. 基础选择器样式

/* 为所有段落元素添加基础样式 - 文字的基石 */
p {
  color: #333;            /* 深灰色文字，如砚台中的墨色 */
  line-height: 1.6;       /* 行间距如溪流般疏朗 */
  margin-bottom: 1.5em;   /* 段落后留白，似山水画中的留韵 */
}

/* 主标题样式 - 如巍峨山岳 */
h1 {
  font-size: 2.5rem;      /* 字号如高峰拔地而起 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 文字微影，似远山含黛 */
}

2. 灵动交互效果

/* 按钮样式 - 等待指尖轻触的精灵 */
.btn {
  padding: 12px 24px;     /* 内边距如张开怀抱 */
  transition: all 0.3s;   /* 变化如春风般柔和渐变 */
  border-radius: 4px;     /* 圆角似鹅卵石般温润 */
}

/* 悬停时绽放生机 */
.btn:hover {
  transform: translateY(-2px);  /* 轻轻跃起，如蝶振翅 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 投下灵动的光晕 */
}

3. 布局的艺术

/* 弹性盒子布局 - 现代CSS的诗意排版 */
.container {
  display: flex;          /* 开启弹性宇宙 */
  justify-content: center;/* 子元素如众星拱月 */
  flex-wrap: wrap;        /* 自动换行，似流水绕石 */
  gap: 20px;             /* 元素间距如呼吸般自然 */
}

/* 卡片元素 - 信息的小舟 */
.card {
  flex: 1 1 300px;       /* 弹性生长，基础宽度300px */
  border: 1px solid #eee; /* 淡雅边框如宣纸边缘 */
  padding: 20px;         /* 内衬留白，似装裱的留边 */
}

4. 响应式设计

/* 媒体查询 - 为不同世界施展魔法 */
@media (max-width: 768px) {
  /* 移动端样式 - 小屏上的精致庭院 */
  .container {
    flex-direction: column; /* 改为垂直布局，如竹简展开 */
  }

  h1 {
    font-size: 1.8rem;   /* 标题缩小，似盆景中的松 */
  }
}