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=)