/* ========================================
   1. 全局重置与基础设置
   - 重置浏览器默认样式
   - 设置页面基本布局与字体渲染
   ======================================== */

/* 
  设置根元素html和body的基础样式
  作用：
  - html和body元素共用同一套样式规则
  - 确保页面基础结构有统一的视觉基础
*/
html,
body {
  /* 设置默认文字颜色为中度灰色，提供柔和的视觉体验 */
  color: #666;
  
  /* 清除浏览器默认的margin，确保元素紧贴视口边缘 */
  margin: 0;
  
  /* 
    设置最小高度为100%，确保即使内容很少时也能撑满整个视口高度
    使用min-height而非height，允许内容超过时自动扩展
  */
  min-height: 100%;
  
  /* 
    字体族栈设置（font stack），提供跨平台字体兼容性：
    - 优先使用Helvetica Neue（macOS/iOS系统字体）
    - 降级使用Arial（Windows系统字体）
    - PingFang SC（苹方，macOS/iOS中文字体）
    - Microsoft YaHei（微软雅黑，Windows中文字体）
    - 最后回退到系统默认无衬线字体
  */
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  
  /* 
    Webkit内核浏览器字体抗锯齿优化（macOS/iOS）
    -webkit-font-smoothing: antialiased 让字体边缘更平滑
  */
  -webkit-font-smoothing: antialiased;
  
  /* 
    Firefox浏览器字体抗锯齿优化
    -moz-osx-font-smoothing: grayscale 开启灰度抗锯齿
  */
  -moz-osx-font-smoothing: grayscale;
  
  /* 设置默认字体粗细为正常（normal = 400），覆盖浏览器可能的默认加粗 */
  font-weight: normal;
}

/* 
  通用选择器 *，应用于所有元素
  作用：统一所有元素的盒模型计算方式
*/
* {
  /* 
    设置所有元素使用border-box盒模型
    盒模型解释：
    - border-box：元素的宽度和高度包含内边距(padding)和边框(border)
    - 这样设置后，设置width:100%时不会因为padding导致溢出
    - 兼容性前缀确保老版本浏览器支持
  */
  -webkit-box-sizing: border-box; /* Safari/Chrome兼容 */
  -moz-box-sizing: border-box;    /* Firefox兼容 */
  box-sizing: border-box;         /* 标准写法 */
}

/* 
  重置常用HTML元素的默认margin和padding
  作用：
  - 创建一致的空白起始点
  - 消除不同浏览器对默认样式的差异
  - 方便后续精确控制间距
*/
html,
body,
div,
dl,        /* 定义列表容器 */
dt,        /* 定义术语 */
dd,        /* 定义描述 */
ol,        /* 有序列表 */
ul,        /* 无序列表 */
li,        /* 列表项 */
h1,        /* 一级标题 */
h2,        /* 二级标题 */
h3,        /* 三级标题 */
h4,        /* 四级标题 */
h5,        /* 五级标题 */
h6,        /* 六级标题 */
p,         /* 段落 */
blockquote,/* 块引用 */
pre,       /* 预格式化文本 */
button,    /* 按钮 */
fieldset,  /* 表单字段集 */
form,      /* 表单 */
input,     /* 输入框 */
legend,    /* 字段集图例 */
textarea,  /* 多行文本框 */
th,        /* 表格表头 */
td {       /* 表格单元格 */
  /* 清除所有内外边距，从零开始构建布局 */
  margin: 0;
  padding: 0;
}