1. 块元素使用CSS中的block定义，它有如下的特点：
- 总是在新行上开始
- 行高以及顶和底边距都可控制
- 如果不设置宽度，默认整个容器100%，设置了其值，将会应用我们所设置的值
- 常用的<p>、<h1>、<form>、<ul>和<li>等都是块元素
2. 通过display：inline语句，可以把元素设置为行内元素，inline元素的特点是
- 和其他元素都在一行上
- 行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变
- 常用的<span>、<a>、<label>、<input>、<img>、<strong>和<em>等都是inline元素的例子
行内元素：可以在一行显示，不能设置高度宽度。
块状元素：不能再一行内显示，可以设置高度宽度。
example 1：
块元素
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.big{
width: 800px;
height: 105px;
background-image: url(3.jpg);
}
a{
font-size: 14px;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
background-color: #F4FAFB;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #6666FF;
}
a:hover{
font-size: 14px;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
background-color: #FF99CC;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<div class="big">
<p><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >首页</a><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >最新新闻</a><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >最新产品</a><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >关于我们</a><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >联系我们</a></p>
</div>
</body>
</html>
example 2：
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.hang{display: inline-block;}
</style>
</head>
<body>
<div>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="hang">这是a标签</a>
<span class="hang">这是span标签</span>
<strong class="hang">这是strong标签</strong>
</div>
</body>
</html>
![css中display属性inline,block,inline-block详解[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)