CSS样式表教程：浏览器默认样式

1. 什么是浏览器默认样式

浏览器默认样式是指浏览器在没有CSS样式表的情况下为HTML元素应用的样式。不同的浏览器会有不同的默认样式，因此在网页开发中，了解浏览器默认样式非常重要。

2. 浏览器默认样式的问题

浏览器的默认样式通常都会存在一些问题，如过大的行高、字体太小或太大、不同浏览器之间的表现不一致等等。因此，为了解决这些问题，我们需要自己定义样式。

3. 如何重置浏览器默认样式

针对浏览器默认样式的问题，有一种解决方案，它就是使用CSS的reset或normalize工具。以下是两种重置浏览器默认样式的方法：

3.1 使用reset.css

reset.css是一种常用的CSS reset工具，它的作用就是将所有HTML元素的默认样式清除。以下是一个使用reset.css的示例：

/* reset.css */

html, body, div, span, applet, object, iframe,
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;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

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

3.2 使用normalize.css

normalize.css是一种更加渐进的CSS reset工具，它的作用是将所有HTML元素的默认样式清除并规范化，使不同的浏览器之间的表现更加一致。使用normalize.css可以避免一些不必要的浏览器兼容性问题。以下是一个使用normalize.css的示例：

/* normalize.css */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Firefox, and Safari.
 */

dl dl,
dl ol,
ol dl,
ol ol {
  margin: 0;
}

/**
 * Remove the margin on nested lists in IE 10+.
 */

ol ul,
ul ol,
ul ul,
ol ol {
  margin: 0;
}

...

4. 总结

了解浏览器默认样式，重置或规范化样式旨在解决不同浏览器之间的兼容性问题，使网页制作更加精美和易维护。针对不同的需求，我们可以选择使用reset.css或normalize.css。