CSS

* { box-sizing: border-box; }
p { line-height: 1.6; }
.btn { cursor: pointer; }
#header { position: fixed; }
[disabled] { opacity: 0.5; }

/* 所有外部链接 */
a[href^="https"] { color: green; }

/* 所有 PDF 链接 */
a[href$=".pdf"]::after { content: " (PDF)"; }

/* input 的 type */
input[type="text"] { border: 1px solid #ccc; }

/* nav 下所有 a */
nav a { text-decoration: none; }

/* ul 的直接 li 子元素 */
ul > li { list-style: none; }

/* h2 后紧邻的第一个 p */
h2 + p { font-size: 1.1em; }

/* h2 后所有兄弟 p */
h2 ~ p { color: #555; }

/* 交互状态 */
button:hover { background: #0056b3; }
input:focus { outline: 2px solid #007bff; }
a:visited { color: purple; }

/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
tr:nth-child(even) { background: #f5f5f5; }  /* 表格隔行变色 */
li:not(:last-child) { border-bottom: 1px solid #eee; }

/* :is() 简化 */
:is(h1, h2, h3) { font-family: serif; }

/* :has() 父选择器（现代浏览器支持） */
.card:has(img) { padding: 0; }

/* 清除浮动（经典用法） */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* 引用装饰 */
blockquote::before {
  content: '"';
  font-size: 3em;
  color: #ccc;
}

/* 首字下沉 */
p::first-letter {
  font-size: 2em;
  float: left;
  line-height: 1;
}

/* 选中文字颜色 */
::selection {
  background: #007bff;
  color: #fff;
}

/* 占位文字样式 */
input::placeholder { color: #aaa; }

/* 权重计算示例 */
#nav .item a:hover { }   /* 100 + 10 + 1 + 10 = 121 */
.list > li.active { }    /* 10 + 1 + 10 = 21 */

/* 全局推荐设置 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 块级元素水平居中 */
.container {
  width: 800px;
  margin: 0 auto;
}

/* 外边距折叠：相邻块级元素垂直 margin 会合并取最大值 */
/* 避免方法：使用 padding 或触发 BFC */

.card {
  padding: 1.5rem 2rem;  /* 上下 1.5rem，左右 2rem */
}

.box {
  border: 1px solid #ddd;           /* 简写：宽度 样式 颜色 */
  border-radius: 8px;                /* 圆角 */
  border-top: 3px solid #007bff;    /* 单边设置 */
}

/* 圆形（宽高相同时） */
.avatar { border-radius: 50%; }

button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* 去除默认轮廓时必须提供替代方案（无障碍要求） */
input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.hidden { display: none; }
.visible { display: block; }
nav a { display: inline-block; padding: 0.5rem 1rem; }

/* visibility: hidden —— 隐藏但仍占空间 */
.placeholder { visibility: hidden; }

/* opacity: 0 —— 完全透明但仍占空间，仍可触发事件 */
.fade-out { opacity: 0; }

/* 绝对定位居中（经典技巧） */
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 固定导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 粘性表头 */
th {
  position: sticky;
  top: 0;
  background: #fff;
}

/* 父相子绝（常用于角标、徽章） */
.parent { position: relative; }
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

.dropdown { z-index: 100; }
.modal    { z-index: 200; }
.toast    { z-index: 300; }

/* 单行文字溢出省略号 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 多行文字溢出省略号 */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 导航栏：左 logo 右菜单 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

/* 卡片列表自动换行 */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* 侧边栏固定宽度，内容区自动填满 */
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }   /* 不放大不收缩，固定 240px */
.content { flex: 1; }           /* 占满剩余空间 */

/* flex 简写含义 */
flex: 1;          /* flex: 1 1 0%  —— 等比分配 */
flex: auto;       /* flex: 1 1 auto */
flex: none;       /* flex: 0 0 auto —— 固定尺寸 */
flex: 0 0 200px;  /* 严格固定 200px */

/* 三列等宽 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* 响应式卡片（最小 200px，自动填充列数） */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* 经典页面布局（命名区域） */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
}
.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer  { grid-area: footer; }

/* 横跨 2 列 */
.banner { grid-column: 1 / span 2; }

/* 横跨所有列 */
.full-width { grid-column: 1 / -1; }

/* 特定起止位置 */
.hero {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.9em;
}

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* 加载期间先显示系统字体 */
}

body { font-family: 'MyFont', sans-serif; }

/* 链接下划线 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* 文字阴影 */
h1 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }

/* 中文首行缩进 */
p { text-indent: 2em; }

/* 禁止换行 */
.tag { white-space: nowrap; }

color: #ff0000;                   /* 十六进制 */
color: #f00;                      /* 十六进制简写 */
color: rgb(255, 0, 0);            /* RGB */
color: rgba(255, 0, 0, 0.5);      /* RGBA（含透明度） */
color: hsl(0, 100%, 50%);         /* HSL（色相、饱和度、亮度） */
color: hsla(0, 100%, 50%, 0.5);   /* HSLA */
color: oklch(0.6 0.2 30);         /* OKLCH（现代，感知均匀） */
color: transparent;                /* 完全透明 */
color: currentColor;               /* 继承当前文字颜色 */

/* 背景图覆盖 */
.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 线性渐变 */
.gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 径向渐变 */
.radial {
  background: radial-gradient(circle at center, #fff 0%, #ccc 100%);
}

/* 多背景叠加 */
.multi-bg {
  background:
    url('/icons/pattern.svg') top right no-repeat,
    linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

/* 文字填充渐变 */
.gradient-text {
  background: linear-gradient(90deg, #f093fb, #f5576c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* 悬停浮起效果 */
.card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* 3D 翻转卡片 */
.flip-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card:hover {
  transform: rotateY(180deg);
}

/* 修改变换原点 */
.scale-from-left {
  transform-origin: left center;
  transform: scaleX(0);
}

/* 语法：property duration timing-function delay */
.btn {
  background: #007bff;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

/* 常用缓动函数 */
transition-timing-function: ease;         /* 默认，先快后慢 */
transition-timing-function: ease-in;      /* 慢进快出 */
transition-timing-function: ease-out;     /* 快进慢出 */
transition-timing-function: ease-in-out;  /* 慢进慢出 */
transition-timing-function: linear;       /* 匀速 */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹簧效果 */

/* 定义关键帧 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 应用动画 */
.fade-in {
  animation: fadeIn 0.5s ease-out both;
}

/* loading 转圈 */
.loading {
  animation: spin 1s linear infinite;
}

/* 动画属性说明 */
.box {
  animation-name: fadeIn;           /* 关键帧名称 */
  animation-duration: 0.5s;         /* 持续时长 */
  animation-timing-function: ease;  /* 缓动函数 */
  animation-delay: 0.1s;            /* 延迟 */
  animation-iteration-count: 1;     /* 次数（infinite 为无限） */
  animation-direction: normal;      /* 方向（alternate 来回） */
  animation-fill-mode: both;        /* 动画前后状态（forwards/backwards/both） */
  animation-play-state: running;    /* 运行状态（paused 暂停） */
}

/* 移动优先写法（推荐）：默认为移动端样式，用 min-width 逐步增强 */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* 常用断点（参考 Tailwind CSS） */
/* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

/* 其他媒体特征 */
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .no-print { display: none; }
}

/* 流体字号（响应式缩放） */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* 推荐内容行宽控制 */
p { max-width: 70ch; }

/* 全屏高度（兼容移动端地址栏） */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* 定义变量（通常在 :root 上全局定义） */
:root {
  --color-primary: #007bff;
  --color-text: #333;
  --color-bg: #fff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 使用变量 */
.btn {
  background: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
}

/* 提供回退值 */
.box { color: var(--color-text, #333); }

/* 暗色主题切换 */
[data-theme="dark"] {
  --color-primary: #4dabf7;
  --color-text: #eee;
  --color-bg: #121212;
}

/* 组件级别覆盖 */
.card { --radius: 12px; }

.btn         { cursor: pointer; }
.disabled    { cursor: not-allowed; }
.draggable   { cursor: grab; }
.draggable:active { cursor: grabbing; }
.loading     { cursor: wait; }

/* 完全禁用鼠标事件（包括 hover、click） */
.overlay { pointer-events: none; }

/* 恢复子元素的事件响应 */
.overlay .clickable { pointer-events: auto; }

/* 禁止用户选中文字 */
.no-select { user-select: none; }

/* 全选（双击即可选中全部） */
.code-block { user-select: all; }

/* 保持宽高比 */
.video-wrapper { aspect-ratio: 16 / 9; }
.avatar        { aspect-ratio: 1; width: 48px; }

/* 图片容器固定尺寸，不变形 */
.thumbnail {
  width: 200px;
  height: 150px;
  object-fit: cover;
  object-position: center top;
}

/* 平滑滚动 */
html { scroll-behavior: smooth; }

/* 锚点偏移（避免被固定导航遮挡） */
[id] { scroll-margin-top: 80px; }

/* 语法：offset-x offset-y blur-radius spread-radius color */
.card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* 内阴影 */
.input:focus { box-shadow: inset 0 0 0 2px #007bff; }

/* 多层阴影 */
.elevated {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

.blur      { filter: blur(4px); }
.grayscale { filter: grayscale(100%); }
.dim       { filter: brightness(0.8); }

/* 组合多个滤镜 */
.vintage { filter: sepia(0.5) contrast(1.1) brightness(1.05); }

/* 阴影（支持透明 PNG，box-shadow 不支持） */
.icon { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)); }

overflow: hidden;     /* 或 auto、scroll */
display: flow-root;   /* 专门用于触发 BFC（推荐，语义明确） */
display: flex;
display: grid;
position: absolute;
position: fixed;
float: left;          /* 或 right */

/* 1. 清除浮动（子元素浮动导致父元素高度塌陷） */
.parent { display: flow-root; }

/* 2. 防止外边距折叠 */
.wrapper { display: flow-root; }

/* 3. 阻止元素被浮动元素覆盖 */
.content { overflow: hidden; }

/* 提前告知浏览器该元素即将发生变换 */
.animated { will-change: transform; }
/* 动画结束后应通过 JS 移除，避免长期占用内存 */

.card { contain: layout style; }