block、inline和inline-block的区别

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;
}

效果：