css清除默认样式

在网页设计中，我们经常需要对元素的默认样式进行清除，以便自定义样式能够正常显示，本文将详细介绍如何使用CSS清除默认样式，让你的网页元素更加美观、统一。

为什么要清除默认样式？

网页浏览器内置了一套默认样式，这些样式会影响网页元素的显示效果，由于不同浏览器之间的默认样式可能存在差异，为了确保网页在不同浏览器中呈现出一致的效果，我们需要对默认样式进行清除。

清除默认样式的方法

1、使用通用选择器

通用选择器（*）可以选中页面中的所有元素，通过设置*的样式，我们可以清除大部分元素的默认样式。

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这段代码中，我们将所有元素的margin和padding设置为0，同时将box-sizing设置为border-box，使得元素的宽度和高度包括边框和内边距。

2、针对特定元素清除默认样式

虽然通用选择器可以清除大部分默认样式，但有些元素可能需要特别处理，以下是一些常见元素的默认样式清除方法：

（1）清除body的默认样式

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

css清除默认样式

这里我们设置了body的字体、行高和文字颜色。

（2）清除ul、ol的默认样式

ul,
ol {
  list-style: none;
}

这段代码去除了ul和ol的默认列表样式。

css清除默认样式

（3）清除a的默认样式

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #f40;
}

这里我们设置了a标签的文字颜色、去除了下划线，并在鼠标悬停时改变文字颜色。

（4）清除input的默认样式

input {
  border: none;
  outline: none;
  font-size: 16px;
}
input[type="submit"],
input[type="button"] {
  cursor: pointer;
}

css清除默认样式

这段代码去除了input的边框和轮廓，并设置了字体大小，为submit和button类型的input设置了鼠标手型。

3、使用CSS Reset

CSS Reset是一种更为彻底的清除默认样式的方法，它通过为所有元素设置统一的样式，从而消除浏览器之间的差异，以下是一个常用的CSS Reset示例：

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,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
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;
}