每一個元素都有默認的display屬性值，對于一些開始學CSS的朋友們，很容易混淆display:block;inline:inline-block這三種用法，下面將具體細說每一種的具體用法和實例相結(jié)合。
一、display:block（塊級元素）
1.一個block元素總是會占據(jù)一行，當有多個block元素就要新起多行對應。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='div1'>11</div>
<div id='div2'>22</div>
</body>
</html>
CSS:
#div1{
border:1px solid red;
}
#div2{
border:1px solid red;
}
效果圖：
2、block元素可以設(shè)置width，默認情況下，block元素的寬度自動填滿其父類元素寬度；即使設(shè)置了寬度，block仍然是獨占一行。
#div1{
border:1px solid red;
width:100px;
}
#div2{
border:1px solid red;
width:100px;
}
效果圖：
3、block元素可以設(shè)置height，默認情況下，block元素的高度會自動拓展包含子元素的內(nèi)容。
#div1{
border:1px solid red;
width:100px;
height:100px;
}
#div2{
border:1px solid red;
width:100px;
height:100px;
}
效果圖：
4、block元素可以設(shè)置padding和margin屬性
#div1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px
}
#div2{
border:1px solid red;
width:50px;
height:50px;
}
效果圖：只對div1增加了padding和margin屬性，參考div2進行對比。
5、block元素不能實現(xiàn)vertical-align這個屬性。
總結(jié)：
<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素常見的例子，我們可以設(shè)置寬度和高度，同時可以控制元素的padding和margin屬性。
二、display:inline（行內(nèi)元素）
1、inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在一行內(nèi)，直到排不下再新?lián)Q一行。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span id="span1">11</span>
<span id="span2">22</span>
</body>
</html>
CSS：
#span1{
border:1px solid red;
}
#span2{
border:1px solid red;
}
效果圖：
2、inline元素設(shè)置width和height屬性無效，寬度由元素內(nèi)容決定。非替換行內(nèi)元素(p、label等)的行框高由line-height決定，替換行內(nèi)元素(img、input、textarea等)的行框高由height、margin、padding、border決定。
#span1{
border:1px solid red;
width:100px;
height:100px;
}
#span2{
border:1px solid red;
}
效果圖：只新增span1中寬度和高度，span2作為對比參考
3、margin和padding 在豎直方向上無效，在水平方向上有效。
#span1{
border:1px solid red;
padding:20px;
margin:20px;
}
#span2{
border:1px solid red;
}
效果圖：只新增span1中padding和margin，span2作為對比參考
4、inline元素受vertical-align屬性和white-space屬性控制
總結(jié)：
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素常見的例子，設(shè)置寬度和高度對inline元素沒有影響，設(shè)置padding和margin在豎直方向上無效，在水平方向上有效。
三、display:inline-block
既具有 block 元素可以設(shè)置寬高的特性，同時又具有 inline 元素默認不換行的特性。當然不僅僅是這些特性，比如 inline-block 元素也可以設(shè)置 vertical-align 屬性。但是不是所有瀏覽器都支持這個屬性，例如IE6和7就不支持這個屬性，要實現(xiàn)這個屬性必須利用其它辦法。
HTML ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="div1">11</div>
<span id="span1">22</span>
</body>
</html>
CSS：
#div1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px;
display:inline-block;
}
#span1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px;
display:inline-block;
}
效果圖：div1實現(xiàn)了不分行，span1實現(xiàn)了設(shè)置寬度和高度
