前言
因为之前学习css时候急于求成，学习的很不扎实，对于display还有块级元素等知识都了解的非常模糊，于是，最近我决定来恶补一下。
其实块级元素、内联元素和display有着密不可分的关系，下面先看一下display的三个相关的属性。
一、display
display跟块级元素相关的包括以下三个属性 block,inline,inline-block三个属性。（当然还包括很多其他的属性，详情请见 http://www.w3school.com.cn/cssref/pr_class_display.asp）
1 display:block; 2 display:inline; 3 display:inline-block;
每次看到这几个我就很晕啦，不懂这个其实就是因为我没有深刻的理解 块级元素和内联元素 之间的区别。（之前只是知道对于标签有着两种分类方法）
以下摘自慕课网（点击为原文链接）。
对于下面的好看的边框代码1 border:1px solid #bbe1f1;background:#eefaff; 2 border:1px solid #9bdf70;background:#f0fbeb; 3 border:1px solid #a5b6c8;background:#eef3f7;
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
<div>我要变成内联元素</div>
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
提示：下一小节是用视频动画来讲解css中的盒模型。
上面完全是摘抄出来的，那么我个人来总结一下：
块级元素就是 1.霸占一整行（像是多了个<br>标签） 2.可以自行设置高度和宽度
内联元素就是 1.一个挨着一个（对比上面没有，更正常一点） 2.不能自己更改高度宽度
那么，有些时候内联元素我就是想更改高度和宽度怎么办，那么就要用到display:block;，这样呢，就能更改高度和宽度啦。还有个办法，就是设置inline-block，感觉这个属性就是内联元素增加了block一样。