/* ==========================================================================
   1. 核心盒模型重置 (现代重置的核心)
   ========================================================================== */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* 防止 iOS 横屏时字体大小自动调整 */
}

*, *::before, *::after {
  box-sizing: inherit; /* 让所有元素继承 html 的 border-box */
}

/* ==========================================================================
   2. 基础间距与显示修复 (Normalize + Reset)
   ========================================================================== */
body {
  margin: 0;
  line-height: 1.5; /* 现代网页推荐的黄金行高 */
  -webkit-font-smoothing: antialiased; /* 让 Chrome 上的字体显示更清晰 */
}

/* 让图片和媒体元素更易于管理 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   3. 典型元素重置 (消除浏览器默认干扰)
   ========================================================================== */
/* 去掉列表默认符号 (初学者经常被这个坑) */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 让标题不再自带奇怪的间距，且字体大小可控 */
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-weight: normal;
}

/* 让链接默认没有下划线，颜色随父级 */
a {
  text-decoration: none;
  color: inherit;
}

/* 让按钮和输入框继承父级字体，不再是浏览器丑丑的默认字体 */
button, input, select, textarea {
  font: inherit;
}