CSS Reset

CSS Reset 通用版

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

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
} 

Normalize.css 精简版

比纯 reset 更温和，保留有用默认样式：

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

img {
  border-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

textarea {
  overflow: auto;
}

* {
  box-sizing: border-box;
}

简单说明

• Reset 版：彻底清空所有默认样式，从零开始。
• Normalize 版：统一浏览器差异，不暴力清空，更适合项目开发。

项目级通用 CSS Reset + 移动端适配 + 全局基础样式

/* ==========================================
   CSS Reset & 全局基础样式
   适配PC + 移动端，干净统一
========================================== */

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 移动端基础配置 */
html {
  /* 统一字体渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 禁止文字自动调整大小 */
  -webkit-text-size-adjust: 100%;
  /* 全局平滑滚动 */
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  overflow-x: hidden;
}

/* 图片、媒体禁止超出容器 */
img, svg, video, canvas, audio, iframe {
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

/* 列表重置 */
ul, ol {
  list-style: none;
}

/* 链接重置 */
a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* 按钮、输入框样式继承 */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* 按钮点击态去除高亮 */
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 表格重置 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 移动端常用：禁止长按菜单（可选） */
/*
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
*/

• 统一所有浏览器默认样式
• 移动端 tap 高亮、点击蓝框全部去掉
• 图片不会有默认下边距、不会撑破容器
• 按钮、输入框样式完全可控
• 字体平滑、滚动更舒服