当前位置：首页 > news >正文

【CSS】CSS 样式重置 (normalize.css 和 reset.css) 和通用样式配置

news 2025/7/7 12:30:56

一般来说，每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。

他们的区别：

Normalize.css更加注重保留有用的浏览器默认样式，仅修复浏览器之间的不一致性，适用于需要一致性、可访问性和可用性的项目。
Reset CSS则取消了所有浏览器的默认样式，并使用开发者自己定义的样式来构建网页，适用于需要更多自定义的项目。

上述来源：normalizecss_and_reset_css

所以我再项目中一般会安装 normalize.css

npm i normalize.css

之后全局引入：

import "normalize.css";

然后手动创建 reset.css ：

body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {padding: 0;margin: 0;
}a {text-decoration: none;color: #333;
}img {vertical-align: top;
}ul, li {list-style: none;
}button {outline: none;border: none;
}

在这里插入图片描述

还有一个文件：common.css 是配置全局通用 css 文件，比如：

body,
textarea,
select,
input,
button {font-size: 12px;color: #333;font-family: Arial, Helvetica, sans-serif;background-color: #f5f5f5;
}.wrap-v1 {width: 1100px;margin: 0 auto;
}.wrap-v2 {width: 980px;margin: 0 auto;
}.sprite_01 {background: url(../img/sprite_01.png) no-repeat 0 9999px;
}.sprite_02 {background: url(../img/sprite_02.png) no-repeat 0 9999px;
}.sprite_cover {background: url(../img/sprite_cover.png) no-repeat 0 9999px;
}.sprite_icon {background: url(../img/sprite_icon.png) no-repeat 0 9999px;
}.sprite_icon2 {background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
}.sprite_icon3 {background: url(../img/sprite_icon3.png) no-repeat 0 9999px;
}.sprite_button {background: url(../img/sprite_button.png) no-repeat 0 9999px;
}.sprite_button2 {background: url(../img/sprite_button2.png) no-repeat 0 9999px;
}.sprite_table {background: url(../img/sprite_table.png) no-repeat 0 9999px;
}.sprite_playbar {background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
}.sprite_playlist {background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
}
.ant-message {left: 0 !important;transform: none !important;
}
.ant-message-notice-content {position: fixed !important;left: 50% !important;bottom: 60px;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.7) !important;color: #fff;
}