display:block将元素设置为块级元素
block元素的特点：
- 前后都有换行，和前后元素都不在一行
- 宽度、行高、边距都可以自行设置
- 宽度缺省是它的容器的100%，除非设置一个宽度
-
<div>, <p>, <h1>, <form>, <ul>和<li>是块元素的例子。
示例一：
HTML:
<div>
<p>hello world</p>
</div>
CSS:
div{
background-color:red;
height:200px;
}
效果：
示例二：
HTML：
<input/>
<input/>
CSS：
input{
display:block;
height:50px;
width:100px;
}
上面例子中的input就成了一个块级元素了。
效果：
display:inline将元素设置为行内元素
inline元素的特点：
- 和其他元素都在一行上
- 高，行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变
-
<span>, <a>, <label>, <input>, <img>, <strong>和<em>是inline元素的例子。
例子：
HTML：
<div>
<h1>hello</h1>
<h1>world</h1>
</div>
CSS:
h1{
display:inline;
}
例子中的h1具有了行内元素的特点
效果：
display:inline-block
inline-block元素的特点：
- 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
例子：
HTML：
<div>
<h1>hello</h1>
<span>world</span>
</div>
CSS:
h1{
display:inline-block;
width:100px;
height:50px;
background-color:red;
}
效果：
