css怎么清除所有tag标签的默认样式

在 CSS 中，清除所有 HTML 标签的默认样式通常称为 CSS Reset 或 Normalize.css。以下是几种常见的方法：

方法 1：使用通配符选择器 *（简单但性能较差）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

作用：

清除所有元素的 margin和 padding

设置 box-sizing: border-box（推荐，使 width包含 padding和 border）

缺点：

会影响所有元素，包括表单、按钮等，可能导致某些 UI 组件样式异常

性能较差（浏览器需要遍历所有元素）

方法 2：更精细的 CSS Reset（推荐）

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr {
  margin: 0;
  padding: 0;
}

/* 清除列表样式 */
ul, ol {
  list-style: none;
}

/* 清除默认边框 */
img, iframe {
  border: 0;
}

/* 清除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 清除表单元素默认样式 */
button, input, select, textarea {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
}

/* 清除表格默认样式 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 设置默认盒模型 */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

优点：

更精细，避免影响不必要的元素

性能比 *更好

缺点：

需要手动维护需要清除样式的标签

方法 3：使用现成的 CSS Reset 库

(1) Normalize.css（推荐）

作用：保留有用的默认样式，修复浏览器不一致性

官网：https://necolas.github.io/normalize.css/

安装：

npm install normalize.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">

(2) Eric Meyer’s Reset CSS

作用：完全清除默认样式

官网：https://meyerweb.com/eric/tools/css/reset/

使用：

<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">

总结

方法	特点	适用场景
* { margin: 0; padding: 0 }	简单粗暴，但影响性能	快速原型开发
手动 CSS Reset	精细控制，性能较好	自定义项目
Normalize.css	保留有用默认样式，修复浏览器差异	生产环境推荐
Eric Meyer’s Reset	完全清除默认样式	需要完全重置样式时

css怎么清除所有tag标签的默认样式

方法 1：使用通配符选择器 *（简单但性能较差）

作用：

缺点：

方法 2：更精细的 CSS Reset（推荐）

优点：

缺点：

方法 3：使用现成的 CSS Reset 库

(1) Normalize.css（推荐）

(2) Eric Meyer’s Reset CSS

总结

推荐做法：

作者：美景宏图

北京美景宏图

css怎么清除所有tag标签的默认样式

​方法 1：使用通配符选择器 *（简单但性能较差）​​

​作用​​：

​缺点​​：

​方法 2：更精细的 CSS Reset（推荐）​​

​优点​​：

​缺点​​：

​方法 3：使用现成的 CSS Reset 库​​

(1) Normalize.css（推荐）​​

(2) Eric Meyer’s Reset CSS​​

​总结​​

​推荐做法​​：

作者：美景宏图

北京美景宏图

方法 1：使用通配符选择器 *（简单但性能较差）

作用：

缺点：

方法 2：更精细的 CSS Reset（推荐）

优点：

缺点：

方法 3：使用现成的 CSS Reset 库

(1) Normalize.css（推荐）

(2) Eric Meyer’s Reset CSS

总结

推荐做法：