行内元素：span ,a, ,strong , em, del, ins。特点：在一行上显示；不能直接设置宽高；元素的宽和高就是内容撑开的宽高。
块元素：div,h1-h6,p,ul,li。特点：独占一行；可以设置宽高；注释：嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
行内块元素(内联元素)：input img。特点：在一行上显示，也可设置其宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
300px;
height: 100px;
background-color: red;
}
p {
height:50px;
background-color: #00ffff;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
上述代码演示了父元素div里嵌套了一个子元素p，p在没有设置宽度的情况下，默认的接受了父div的宽度。
行内元素转块元素：display：block。行业元素配置之后，将会拥有块元素的所有属性。可以独占一行，并可以设置宽高。
块元素转行内元素：display:inline。块元素配置之后，将会拥有行业元素的所有属性。不在拥有设置宽高的属性，也不会独占一行。
块元素和行内元素转行内块元素：display:inline-block。配置之后，既可以在一行上显示，也可以设置宽高。