前端CSS怎么还原_CSS样式重置与浏览器默认样式还原教程

<h1>

margin

<ul>

padding

list-style

margin

padding

p

margin-block-start

margin-block-end

1em

<ul>

<ol>

padding-left

list-style-type

<button>

<input>

margin

padding

border

0

font-size

line-height

list-style

<h1>

<strong>

<strong>

<h1>

<h2>

/* 1. 统一盒模型：这是现代CSS布局的基石，强烈推荐 */
html {
  box-sizing: border-box;
  /* 统一字体大小，方便rem单位计算 */
  font-size: 16px; /* 或根据设计稿调整 */
}

*, *::before, *::after {
  box-sizing: inherit; /* 继承html的box-sizing设置 */
}

/* 2. 移除所有元素的默认外边距和内边距：这是最常见的布局干扰源 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, figcaption, hr,
fieldset, legend, textarea, input, button, select {
  margin: 0;
  padding: 0;
}

/* 3. 统一列表样式：通常我们都会自定义列表样式，所以先移除默认的 */
ol, ul {
  list-style: none;
}

/* 4. 确保图片响应式且避免底部空隙：防止图片下方出现多余的空白 */
img, picture, video, canvas, svg {
  display: block; /* 将图片设为块级元素，消除基线对齐问题 */
  max-width: 100%; /* 确保图片不会溢出父容器 */
  height: auto; /* 保持图片宽高比 */
}

/* 5. 链接样式：通常会移除下划线，颜色则根据主题自定义 */
a {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色，而不是默认的蓝色 */
}

/* 6. 表单元素：统一一些基础样式，让它们在不同浏览器下表现更一致 */
button, input, select, textarea {
  font-family: inherit; /* 继承父元素的字体，而不是浏览器默认字体 */
  font-size: inherit; /* 继承父元素的字号 */
  line-height: inherit; /* 继承父元素的行高 */
  border: none; /* 移除默认边框，方便自定义 */
  background-color: transparent; /* 移除默认背景色 */
  color: inherit; /* 继承父元素的颜色 */
}

/* 7. 文本元素：一些基础的文本处理 */
strong, b {
  font-weight: bold; /* 确保加粗效果 */
}

em, i {
  font-style: italic; /* 确保斜体效果 */
}

/* 8. 避免焦点轮廓被移除：为可交互元素提供可见的焦点状态，提升可访问性 */
*:focus-visible {
  outline: 2px solid var(--focus-color, blue); /* 默认蓝色，或自定义变量 */
  outline-offset: 2px;
}
/* 也可以在某些特定场景下，比如点击按钮时，用JS控制移除outline，但默认不移除是更好的做法 */

margin

padding

<strong>

font-weight: bold

box-sizing: border-box;

width

height

padding

border