一、项目样式重置原因

• 每个浏览器中都默认为html中的body设置了margin和padding等属性
• 但是不同浏览器设置具体的值是不同的，这样就造成了在不同浏览器中默认的样式会变得不同，不好进行调试
• 统一样式也是为了更加精确公职样式

二、项目中进行样式重置

• 开源项目——normalize.css
• 可以在github上直接搜索相关文件进行引用
• 也可以通过npm i --save normalize.css 进行安装

引用

在asset/css/reset.css下引用

@import '~normalize.css';

额外的重置

• 一般引用了开源重置还不够，需要自己添加些重置代码，甚至是全局样式代码都可以添加

@import '~normalize.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;
}

ul, ol, li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  color: #666;
  text-decoration: underline;
}

i, em {
  font-style: normal;
}

input, textarea, button, select, a {
  outline: none;
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: none;
  vertical-align: middle;
}

/* 全局样式 */
body, textarea, select, input, button {
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5f5f5;
}

/* 文字只显示一行 */
.text-nowrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 宽度1100px，并且居中 */
.wrap-v1 {
  width: 1100px;
  margin: 0 auto;
}

/* 宽度980px，并且居中 */
.wrap-v2 {
  width: 980px;
  margin: 0 auto;
}