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

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

article 2024/11/2 4:56:09

一般来说，每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 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;
}