HTML元素分类和默认样式的处理方法

HTML元素分类

按默认样式分类

• block 块级：独占一整行，可以设置自己的宽高。
• inline 行内元素，设置宽高无效。
• inline-block 内联块级元素，可以和行内元素在同一行显示，可以设置自己的宽高。

按内容分类

HTML元素嵌套关系

• 块级元素可以包含行内元素
• 块级元素不一定能包含块级元素，比如 p 标签里面不能再包含 div 元素
• 行内元素一般不能包含块级元素，比如在span里面包含div是不合法的，但是a 元素是可以包含块级元素的

所以HTML是需要遵守嵌套规则的，嵌套规则来自 内容的分类 以及它的内容模型（content model），最好去W3C翻下文档看下内容模型。

HTML元素默认样式

大部分开发中默认样式会带来一些问题，此时就需要重置CSS样式（CSS Reset），这样就把我们不需要的默认的样式给去掉，CSS Reset并不是W3C中的标准，它是开发者在实践中总结出来的，因此会有多种不同的写法。

写法一：CSS Tools:Reset CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

整个代码还是比较简洁的，只是做了初始化的工作，把我们不想要的样式做了归零给去掉了。

写法二：YUI 3 Reset CSS

YUI 是雅虎（Yahoo）的前端框架，在前几年影响力还是很大的，它的理论在经过大家吸收发扬后又出现了很多新的方法，这套重置样式现在的使用不是很多了。它把没用的样式都归零去掉了，同时把各个浏览器显示不同的地方用css进行了统一，它留下了很多可以学习的理论。

写法三：

* {
margin:0;
padding:0;
}

*表示任何元素都适用。有些人认为这个会带来性能上的问题，这个稍后介绍。

Normalize.css

它认为既然浏览器给了我们默认样式，那应该是有意义的，只是各个浏览器显示不一致，那我把显示不一致的地方显示一致就好了，它会保留一些元素的margin和padding，同时会做一些修正。