块级元素，行内块元素及行内元素的特点
1.块级元素
块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。
常用的块级元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素。
块级元素的特点：
（1）总是另起一行（特立独行）
（2）可以设置其宽度、高度，内外边距
（3）在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
（4）可以容纳行内元素和其他块元素。
2.行内元素
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。
常用的行内元素有<span >,<a>, ,<strong> , <em>等
行内元素的特点：
（1）总是和相邻的行内元素在同一行上（物以类聚）
（2）设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
（3）默认宽度是他自身内容的宽度。
（4）行内元素只能容纳其他行内元素或者文本。
3.行内块元素
行内块元素综合了块元素和行内元素的不同特点,例如<img>,<input>,我们可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。
行内块元素的特点：
(1)和相邻行内元素在同一行，但是之间会有空白缝隙。
(2)默认宽度是他本身内容的宽度。
(3)宽度、高度、行高、外边距以及内边距都可以手动设置。
方法1
给img设置vertical-align:middle,p设置display：inline。
但图片与文字在一行时，默认情况下，图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。
实现效果图后的全部代码
方法2
将图片和文字分别用不同的div包裹着，div是块级元素，各占一行。因此，设置div{display：inline-block}，使div在同一行，div{vertical-align:middle}。
实现的代码：
方法3
设置图片为背景图片（需已知高度，只适用于单行文字）
方法4:
将图片设置float：left，图片与文字会自动会左排列，因图片已设高度，所以设置文字的行高与图片的高度相同，文字将会与图片水平垂直居中。
实现效果后的代码：
效果前的页面
效果后的页面
