在前端开发中，CSS Reset 是一个常用的技术，它可以解决一些常见的样式问题，比如不同浏览器之间的样式差异、默认样式的影响等等。本文将介绍多种常见的 CSS Reset 技术，包括重置样式表、标准化样式表、自定义样式表等，帮助大家更好地解决前端开发中的样式问题。
1. 重置样式表
重置样式表的目的是将所有 HTML 元素的默认样式都清除掉，然后再重新定义样式。这种方法适用于需要完全自定义样式的项目，但是需要注意的是，这种方法可能会导致一些元素的样式丢失，比如表单元素的默认样式。
下面是一个简单的重置样式表的示例：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}这段代码将所有 HTML 元素的 margin、padding、border、font-size、font-family、vertical-align 这些样式都设置为了默认值。在实际使用中，我们还可以根据需要添加其他的样式。
2. 标准化样式表
标准化样式表的目的是在保留 HTML 元素的默认样式的基础上，消除不同浏览器之间的样式差异，使得网页在不同浏览器中显示效果一致。这种方法适用于需要保留默认样式的项目。
下面是一个简单的标准化样式表的示例：
// www.javascriptcn.com code example
html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
font-size: 1.6rem;
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
color: #333;
background-color: #fff;
}这段代码将所有 HTML 元素的 box-sizing 设置为了 border-box，使得元素的宽度和高度包含了 padding 和 border 的宽度。同时，设置了默认的 font-size 为 62.5%，使得 1rem 等于 10px，方便使用 rem 单位。另外，设置了默认的字体、颜色、背景色等样式，使得页面在不同浏览器中的显示效果一致。
3. 自定义样式表
自定义样式表的目的是根据项目的需要，自定义一套适合自己的样式表。这种方法适用于需要定制化样式的项目。
下面是一个简单的自定义样式表的示例：
// www.javascriptcn.com code example
/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Custom */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.2;
margin-bottom: 1rem;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button {
border: none;
background-color: #007bff;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
input[type="text"], input[type="email"], input[type="password"] {
border: 1px solid #ccc;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 1rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
border-color: #007bff;
outline: none;
}这段代码先重置了所有 HTML 元素的默认样式，然后根据需要自定义了一些样式，比如 body 的字体、颜色、背景色等，h1~h6 的样式，a 标签的样式，按钮的样式，输入框的样式等。这种方法需要根据项目的需要进行定制，可以灵活地设置样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38b85a941bf71346c03cd