一、首先要了解什么是塊級元素與行級元素
塊級元素
會占領頁面的一行，其后多個block元素自動換行、 可以設置width，height，設置了width后同樣也占領一行、同樣也可以設置 margin與padding屬性。
ps:常見的塊級元素:div,img,ul,form,p等
行級元素
與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。
ps：em，strong，br,input等
display:inline-block，block，inline元素的區別
1、display：block將元素顯示為塊級元素，從而可以更好地操控元素的寬高，以及內外邊距，每一個塊級元素都是從新的一行開始。
2、display : inline將元素顯示為行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。多個相鄰的行內元素排在同一行里，知道頁面一行排列不下，才會換新的一行。
3、display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示為行內塊狀元素，設置該屬性后，其他的行內塊級元素會排列在同一行。比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不同高度內容的元素時，通常要設置對齊方式如vertical-align: top;來使元素頂部對齊。
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display:inline-block</title>
<style type="text/css">
li{
width:200px;
text-align: center;
list-style: none;
display: inline-block;
background-color: #eee;
}
</style>
</head>
<body>
<ul>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
<li><a href="#">inline-block</a></li>
</ul>
</body>
</html>
display:inline-block，block，inline示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#inline p{
display: inline;
background-color:red ;
width:300px;/*這里設置無用*/
}
#inline-block p{
display: inline-block;
background-color:red ;
width:100px;
padding:10px;
}
#block p{
display: block;
background-color: red;
width:100px;
padding:20px;
}
div{
margin:20px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="inline">
display:inline 在同一行，並且寬度就等於文字內容的寬度且設置寬度無用<p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
</div>
<div id="inline-block">
display:inline-block 既有行級元素的特性，也有塊級元素的特性，因此在同一行，能設置寬高，margin，padding<p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
</div>
<div id="block">
display:block 塊級元素會自動換新行，占領一行,可以設置寬高，margin，padding <p>內容內容內容內容內容內容內容</p>內容內容內容內容內容內容
</div>
</body>
</html>
需要注意的是：
低版本的ie瀏覽器（ie6 ie7）是不支持display:inline-block;所以理論上ie是不識別的，但是在 ie 內核下有個部分叫做 hasLayout，只要觸發了它，這個元素就可以設置高寬從而使行級元素擁有了display:inline-block屬性的表象。