/* study-note: reset.css
 * 作用：浏览器默认样式归一化。
 * 学习重点：这个文件不负责视觉设计，只负责把不同浏览器自带的 margin、列表样式、图片行为、表单字体等基础差异压平。
 * 加载位置：必须放在所有业务 CSS 之前，否则后续布局会被浏览器默认样式干扰。
 */
/* 所有元素及伪元素都使用 border-box，宽高计算会包含 padding 和 border，响应式布局更稳定。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html 层处理移动端字号缩放差异，并开启锚点滚动的平滑效果。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* 清除常见文本和列表元素的默认外边距，让间距全部由项目 CSS 明确控制。 */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* 图片作为块级元素可以消除底部基线空隙，max-width 防止图片撑破容器。 */
img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 表单控件继承页面字体，避免按钮和输入框出现系统默认字体导致视觉不一致。 */
button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

svg {
  display: block;
}