html的三大元素

html的三大元素包括顶级(top-level)元素，块级(block-level)元素和内联(inline)元素。

1. Top-level element 【顶级元素】
   比如html, body, frameset等，它们都属于高级块级元素。

2. Block-level element 【块级元素】
   比如 p, h1~h6, div, ul，li
   顾名思义就是以块显示的元素，高度宽度都是可以设置的。默认状态下每次都占据一整个行，后面的内容也必须再另起一行显示。
   行级元素可以通过css的 display:block和float属性更改成块级元素。块级元素能够独立存在, 一般的块级元素之间以换行分隔。

3. Inline element 【内联元素】
   比如a, br, em, img, li, span
   通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度和高度就是根据自身文字或者图片的宽度延展得来。
   内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。
   当然内联元素也能变成块级元素，那就是通过css的display:inline;和float来实现。

行内元素与块级元素有什么不同？

1. 尺寸
   1）width / heigh
   这是块级元素和行内元素之间的一个重要的不同点 。
   行级元素设置宽高无效，它的宽高仅会因内容的大小和多少而延展，块级元素可以任意设置宽高。
   2）padding / margin
   行级元素的间距和边距左右设置有效，但是上下的间距和边距无效
   块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.
2. text-align属性{left | right | center}
   标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
   解释一下，行内内容是说由行内元素组成的内容。
   但是 IE却没有遵守这个规定。IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
   解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。