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
,同时会做一些修正。