CSS每日精粹 从选择器到布局的艺术指南

# CSS 每日一练

## 基础选择器
/* 为文档中所有段落元素赋予优雅的墨绿色 */
p {
  color: #2E8B57;  /* 使用十六进制颜色代码 */
}

/* 让所有一级标题如晨曦般温暖 */
h1 {
  color: coral;    /* 使用命名颜色值 */
  text-align: center;  /* 使文字居中如同明月当空 */
}

## 盒模型精要
/* 为重要内容打造精致的容器 */
.important-box {
  width: 80%;      /* 宽度如潺潺溪流般自适应 */
  margin: 20px auto;  /* 上下保持距离，左右自动居中 */
  padding: 15px;   /* 内间距如花瓣包裹花蕊 */
  border: 2px dashed #6495ED;  /* 虚线边框似海岸线 */
}

## 灵动交互效果
/* 让按钮在交互时如蝴蝶振翅 */
.btn-hover {
  transition: all 0.3s ease;  /* 平滑过渡如春风拂面 */
}

/* 鼠标掠过时展现生机 */
.btn-hover:hover {
  transform: translateY(-3px);  /* 轻轻上浮似羽毛 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);  /* 投影如薄雾 */
}

## 布局的艺术
/* 构建现代瀑布流布局 */
.grid-container {
  display: grid;   /* 启用网格布局系统 */
  grid-template-columns: repeat(3, 1fr);  /* 三列等分如琴弦 */
  gap: 20px;       /* 项目间距如诗句的停顿 */
}

/* 让每个网格项如画廊展品 */
.grid-item {
  border-radius: 8px;  /* 圆角似鹅卵石 */
  overflow: hidden;    /* 隐藏溢出部分保持整洁 */
}