CSS水墨之道 每日代码修习录

# CSS 每日一练

## 1. 基础选择器
/* 选择所有段落元素，赋予墨色文字与素雅行高 */
p {
  color: #333333;  /* 深灰色文字，如砚台中的墨汁 */
  line-height: 1.6; /* 行间距如宣纸上的工整楷书 */
}

/* 为特别强调的内容披上朱砂色的外衣 */
.highlight {
  color: #e74c3c;  /* 鲜艳的朱红色，似传统印章的印泥 */
}

## 2. 盒模型精要
/* 构建一个雅致的卡片容器 */
.card {
  width: 300px;    /* 如折扇展开的固定宽度 */
  padding: 20px;   /* 内边距似画作留白，韵味悠长 */
  margin: 15px auto; /* 外边距使卡片居中，如装裱好的卷轴 */
  border: 1px solid #e0e0e0; /* 淡灰色边框，若隐若现 */
}

## 3. 布局之道
/* 创建现代禅意的弹性布局 */
.container {
  display: flex;    /* 开启弹性布局，如水般适应容器 */
  justify-content: space-between; /* 项目均匀分布，如星辰各安其位 */
  align-items: center; /* 垂直居中，似天地方圆和谐统一 */
}

## 4. 动画艺术
/* 赋予元素灵动的呼吸效果 */
@keyframes breathe {
  0% { transform: scale(1); }  /* 初始状态如平静湖面 */
  50% { transform: scale(1.05); } /* 微微放大似吸气时的胸腔 */
  100% { transform: scale(1); } /* 回归原状如缓缓呼气 */
}

/* 将呼吸动画应用于图标 */
.icon {
  animation: breathe 3s infinite; /* 循环不息，如天地运行 */
}