前言
在网页开发过程中，浏览器会自动应用一些默认的样式，这些样式虽然有助于快速显示内容，但它们在不同浏览器间可能存在差异，从而影响页面的布局和一致性。为了确保项目在各浏览器中有统一的展示效果，我们通常会使用 CSS 重置样式表（CSS Reset），清理这些默认样式，从而为我们的设计提供一个干净、统一的起点。
本文将介绍一份常见的 CSS 重置样式表，帮助你清理不必要的默认样式，并为你的项目构建一个一致的基础。
代码实现
/* 使用更直观的盒模型（box-sizing） */
*, *::before, *::after {
font-family: inherit;
box-sizing: border-box;
}
/* 取消默认的内外边距 margin 和 padding */
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul , li, p, fieldset, legend, header, footer, hgroup, menu, nav, section, figcaption, figure, mark, form,
time, td, th, label, hr, i, strong {
margin: 0;
padding: 0;
font-style: normal;
font-weight: normal;
font-size: inherit;
}
/* 新布局元素兼容旧版本浏览器 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 允许通过百分比设置应用的高度 */
html, body, #app {
width: 100%;
height: 100%;
line-height: 1;
-webkit-font-smoothing: antialiased; /* 优化文字渲染平滑度 */
}
/* 解决在移动端时，点击元素会出现阴影的问题 */
body {
-webkit-tap-highlight-color: transparent;
}
/* 去除所有项目符号标识 */
li {
list-style: none;
}
/* 去除超链接默认下划线 */
a {
color: inherit;
text-decoration: none;
}
/* 给超链接添加一个默认的 hover 颜色 */
a:hover {
cursor: pointer;
}
/* 去除图片与容器底部的留白，使多媒体内容显示更合理 */
img, iframe, video, canvas {
display: block;
width: 100%;
height: 100%;
}
/* 去除 input 标签的默认样式 */
button, input, textarea {
margin: 0;
padding: 0;
border: 1px solid #dcdfe6;
outline: none;
font-size: inherit;
background-color: transparent;
}
/* input placeholder 文字的样式 */
::-webkit-input-placeholder {
color: #afbdcc;
}
/* 禁止文本域手动拖动大小 */
textarea {
resize: none;
}
/* 解决 Chrome 浏览器默认黄色背景问题 */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}
::-webkit-scrollbar-thumb:active {
background-color: #787878;
}
/* 当垂直与水平滚动条同时存在时的交汇部分样式 */
::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}
/* 其他元素的 corner 部分样式（例如：textarea 可拖动按钮） */
::-webkit-resizer {
background-repeat: no-repeat;
background-position: bottom right;
}
内容解析
1、盒模型（box-sizing）优化
默认情况下，元素的 width 和 height 是基于 content-box 算的，这意味着 padding 和 border 会被加到元素的实际宽高上。通过使用 box-sizing: border-box，我们确保元素的宽高包括 padding 和 border，这样就能避免一些布局上的问题，使得开发时更直观，减少了因盒模型导致的布局错误。
2、清理默认的 margin 和 padding
不同浏览器会为许多元素自动添加 margin 和 padding，这可能导致页面布局不一致。通过重置这些默认值，我们为页面提供一个干净的起点，避免了不必要的空隙或布局冲突。
3、元素兼容性
HTML5 引入了一些新元素，如 article, section 等，这些元素在旧版浏览器中默认并没有设置为 block，导致它们不正常显示。通过显式地为这些元素设置 display: block，我们可以确保在所有浏览器中都能正确渲染。
4、字体优化和渲染平滑度
为了改善字体在不同设备和浏览器上的渲染效果，使用了 -webkit-font-smoothing: antialiased。这项优化可以提升字体的显示质量，尤其在高分辨率的屏幕上，显得更为明显。
5、移动端优化
在移动设备上，点击元素时浏览器会默认显示一个点击阴影效果。通过 -webkit-tap-highlight-color: transparent;，我们去除了这个阴影，使得用户在点击时的体验更加顺畅、清晰。
6、图片、视频和 iframe 展示优化
为了避免图片、视频、iframe 等元素在容器内展示时出现不必要的空白区域，我们设置了 display: block 和 width: 100%，确保这些多媒体内容能够充分填满其父元素，不会影响整体布局。
7、表单控件的样式重置
button, input, textarea 等表单控件在浏览器中的默认样式通常不一致，通过重置它们的边框、背景、内外边距等，我们能够确保表单控件的一致性，并且更容易应用自定义样式。
8、自定义滚动条样式
在 Webkit 内核的浏览器中，我们通过 ::-webkit-scrollbar 等伪元素来自定义滚动条的外观，保证滚动条与页面整体风格一致，提升用户体验。
总结
通过这份 CSS 重置样式表，你可以有效消除浏览器默认样式带来的不一致问题，为你的项目提供一个统一的视觉起点。这不仅能提升页面在不同浏览器中的一致性，还能节省开发过程中调试布局和兼容性问题的时间。
如果你希望更加专注于页面的功能与设计，而不必为各浏览器间的样式差异烦恼，这份 CSS 重置样式表将是一个非常有效的工具。如果你有更多关于 CSS 重置或其他前端问题的讨论，欢迎在评论区留言，我们一起探讨！
