顶级、块级、内联,html元素的三大分类

长见识了：

学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级 (top-level)元素,块级 (block-level)元素和内联 (inline)元素.    1.  Top-level element  【顶级元素】:    {   html, body, frameset   } 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.   2.  Block-level element  【块级元素】:   {   p, h1~h6, div, ul   } 顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。 块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明. 3.  Inline element  【内联元素】: {   a, br, em, img, li, span   } 通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。当然内联元素也能变成块级元素，那就是通过css的display:inline;和float来实现。 内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.       在《CSS权威指南》这样定义到，“任何不是块级元素的可见元素都是内联元素。 其表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话，因为我认为块级元素从表现上更像“行”显示，而内联元素更像是“文本”的显示属性。这其中一点记住很关键，“内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现，原来这只是个内联元素。   详细讲解：http://hi.baidu.com/fengchuyang/blog/item/ba71a264db12a5f4f736549a.html