简单的 CSS 重置 - CSS

当我们使用不同的浏览器打开同一个网站时，有时会出现页面样式不统一的情况。这是因为不同的浏览器对 HTML 元素的默认样式表现不同，而我们所看到的网站的样式是基于浏览器的默认样式进行开发的。

为了解决这个问题，我们可以使用 CSS 重置来覆盖浏览器的默认样式，以此来达到页面样式的统一。不过，需要注意的是，不同的项目需求可能不同，一些项目可能并不需要全面的重置。

以下是一个简单的 CSS 重置：

/* 重置所有元素的样式 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* 重置链接的样式 */
a {
  text-decoration: none;
  color: inherit;
}

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

/* 重置表单元素的样式 */
input,
textarea,
select,
button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  appearance: none;
}

/* 重置图像元素的样式 */
img {
  max-width: 100%;
  display: inline-block;
}

这个 CSS 重置包括了重置所有元素的样式、重置链接的样式、重置列表样式、重置表单元素的样式以及重置图像元素的样式。

其中，重置所有元素的样式使用了通配符 *，这个通配符表示所有元素。重置链接的样式去除了链接下划线并保留链接颜色。重置列表样式使用了 list-style 属性，将列表的点号去掉。重置表单元素的样式去除了边框和默认的背景色，并且采用了 appearance 属性将表单元素的默认样式隐藏掉。重置图像元素的样式使得图片可以自适应容器大小，并且设置为行内块状元素以达到更好的布局效果。

这个 CSS 重置可以作为一个基础样式，用于清除浏览器默认样式。在实际项目中，可能还需要加入一些其他样式以达到项目需求。