每日CSS一练：打造诗意样式

1. 基础选择器 - 为元素披上华裳

/* 为所有段落披上墨色外衣 */
p {
  color: #333333;  /* 如砚台般深沉的文字颜色 */
  font-size: 16px; /* 恰似楷书大小的字号 */
  line-height: 1.6; /* 行距如竹林疏影般优雅 */
}

2. 盒模型 - 构建水墨画般的布局

/* 打造一幅留白得当的东方画卷 */
.container {
  width: 80%;      /* 画幅占八分天地 */
  margin: 0 auto;  /* 居中如明月悬空 */
  padding: 20px;   /* 内边距似装裱留白 */
  border: 1px solid #e0e0e0; /* 淡若远山的边框 */
}

3. 伪类选择器 - 交互的灵动之美

/* 按钮如蜻蜓点水般灵动 */
.btn {
  transition: all 0.3s ease; /* 变化如春风拂面般柔和 */
}

.btn:hover {
  transform: translateY(-3px); /* 悬停时似柳枝轻扬 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 投影如水中涟漪 */
}

4. Flex布局 - 现代诗般的排列

/* 创建如俳句般简洁的布局 */
.flex-container {
  display: flex;       /* 开启弹性盒子 */
  justify-content: space-between; /* 子元素如星辰各居其位 */
  align-items: center; /* 垂直居中如天平两端 */
  flex-wrap: wrap;     /* 自动换行似流水绕石 */
}

5. 动画效果 - 让元素翩翩起舞

/* 赋予元素蝶舞般的动画 */
@keyframes butterfly {
  0% { transform: rotate(0deg); }   /* 初如花苞 */
  50% { transform: rotate(5deg); }  /* 渐次绽放 */
  100% { transform: rotate(0deg); } /* 复归平静 */
}

.logo {
  animation: butterfly 2s infinite; /* 永续如四季轮回 */
}

6. 响应式设计 - 适配万千气象

/* 应对不同天时（屏幕尺寸）的智慧 */
@media (max-width: 768px) {
  /* 小屏如折扇收拢 */
  .sidebar {
    width: 100%;      /* 铺满如宣纸全开 */
    position: static; /* 回归自然流 */
  }

  /* 文字如细雨密集 */
  p {
    font-size: 14px;
    line-height: 1.4;
  }
}