HTMl元素根据表现形式，常见的可以分为两类。
（1）块元素（block）
（2）行内元素（inline)。
当然，除了以上两种元素类型外，还有inline-block、table-cell等元素类型。
1：块元素
块元素在浏览器默认状态下将占据整行，排斥其他元素与其位于同一行。块元素一般为矩形，可以容纳行元素和其他的块元素。
常见的块元素有：div(div层) h1~h6(1到6级标题) p(段落，会自动在其前后创建一些空白) hr(分割线) ol(有序列表) ul(无序列表)
块元素具有如下特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
（2）块元素内部可以容纳其他块元素或行元素。
（3）可以定义高度（height），也可以定义宽度（width。
（4）可以定义四个方向的margin属性。
2：行内元素
行内元素默认显示状态可以与其他行内元素共存在同一行。
常见的行内元素有：strong(加粗强调) em(斜体强调) s(删除线) u(下划线) a(超链接) span(常用行级，可定义文档中的行内元素)
行内元素具有以下特点：
（1）可以与其他行内元素位于同一行。
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。
（3）无法定义高度（height），也无法定义宽度（width）。
（4）可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。
3：Display简介
如果想要将元素从一个类型转换为另外一个类型，就需要display属性。
其语法：display:属性值；
display属性取值：
inline 行内元素
block 块元素
inline-block 行内块元素
table 以表格形式显示，类似于table元素
table-row 以表格行形式显示，类似于tr元素
table-cell 以表格单元格形式显示，类似于td元素
none 隐藏元素
在CSS中，可以使用display:inline-block来将元素转换为行内块元素。行内块元素有以下两个特点。
（1）可以定义width和height。
（2）可以与其他行内元素位于同一行。
inline-block元素既具备块元素的特点，也具备行内元素的特点，在HTMl中，常见的inline-block元素有两个：img元素和input元素。
display:none
在CSS中我们可以使用display:none来隐藏元素。一般情况下，配合JavaScript来动态隐藏元素。
对于display:none需要注意以下：
（1）display:none一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。
（2）display:none不推荐用来隐藏一些对SEO关键的部分。对于搜索引擎来说，它会直接忽略diaplay:none隐藏的内容，不会把display:none隐藏的内容加入权重考虑。
display:none和visibility:hidden的区别
在CSS中，如果想要隐藏某一个元素，我们可以使用display:none或者visibility:hidden来实现，其二者有本质的区别。
（1）display:none的元素被隐藏之后，不占据原来的位置，也就是说彻底消失了，看不见也摸不着。
（2）visibility:hidden的元素被隐藏之后，依然占据原来的位置，也就是说并没有彻底消失，看不见但摸得着。
display:table-cell
在CSS中，display:table-cell可以让元素以表格单元格的形式呈现，也就是说table-cell类型的元素具备td元素的特点。
display:table-cell非常强大，可以实现以下三种功能。
（1）图片垂直居中于元素。
（2）等高布局。
（3）自动平均划分元素，并且在一行显示。
【1】图片垂直居中于元素
在CSS中，可以使用display:table-cell和vertical-align:center来实现大小不固定的图片的垂直居中效果。
语法：
父元素
{
display:table-cell;
vertical-align:center;
}
子元素{vertical-align:center;}
【2】自动平均划分元素
语法：
父元素{display:table};
子元素{display:table-cell;}
当父元素定义display-table而子元素定义display:table-cell时，如果给父元素一定的高度，父元素宽度就会根据子元素的个数进行自动平均划分。
去除inline-block元素间距
在CSS中，使用font-size:0来去除inline:block元素的间距。
语法：
父元素{font-size:0;}
说明：font-size:0是在inline-block元素的父元素添加的。
也可使用font-size:0来去除图片之间的间距。
