浏览器对标签进行了默认设置,所以在我们没有定义样式的时候,会有五花八门的效果
不同的浏览器设置的默认样式是由差异,效果也会有差异。
因为浏览器对标签进行设置,所以我们必须额外设置标签的样式,把之前的样式覆盖(reset)掉。
下列是常用的所有的html标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML Only</title>
</head>
<body>
<article>article</article>
<nav>nav</nav>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<address>address</address>
<p>p</p>
<pre>pre</pre>
<blockquote>blockquote</blockquote>
<ol>
<li>ol li</li>
</ol>
<ul>
<li>ul li</li>
</ul>
<dl>
<dt>dl dt</dt>
<dd>dl dd</dd>
</dl>
<table>
<caption>table caption</caption>
<thead>
<tr><th>table thead tr th</th></tr>
</thead>
<tbody>
<tr><td>table tbody tr td</td></tr>
</tbody>
<tfoot>
<tr><td>table tfoot tr td</td></tr>
</tfoot>
</table>
<form>form</form>
<fieldset>
<legend>fieldset legend</legend>
</fieldset>
<label>label</label>
<input type="text" value="input text">
<input type="button" value="input button">
<button type="button">button button</button>
<select>
<option>select option</option>
</select>
<textarea>textarea</textarea>
<del>del</del>
<ins>ins</ins>
<img src="icon.png">
<iframe src=""></iframe>
<a href="">a</a>
<em>em</em>
<strong>strong</strong>
<i>i</i>
<b>b</b>
<u>u</u>
<s>s</s>
<small>small</small>
<abbr>abbr</abbr>
<q>q</q>
<cite>cite</cite>
<dfn>dfn</dfn>
<sub>sub</sub>
<sup>sup</sup>
<time>time</time>
<code>code</code>
<kbd>kbd</kbd>
<samp>samp</samp>
<var>var</var>
<mark>mark</mark>
</body>
</html>
清除默认样式为
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}
浏览器是通过标签来定义的,所以我们通过标签把浏览的默认样式去掉,这就是清除浏览器的默认样式,也叫做css reset,也可以理解为全局样式定义,在项目初期的时候就定好,引用的时候一定要在第一位。
产品中会有各种各样的需求,所以reset也是变通的,并不是一成不变的:比如说字体 颜色 链接 背景这些都是由需求决定的。
所以reset没什么标准答案,因为不同的产品,需求是不同,所以我们自己要跟句需求来制定属于自的的reset。