经常会碰到display来转换对象的显示方式，所以，决定彻底搞清楚他。
- block块状对象：显示是一个方块，单独占据整行，其他对象下一行显示，相当的霸道！
- inline行内对象（也叫内联元素）：允许下一对象与之共享一行！他的高度默认就是一行文字的高度！
- inline-block：官方解释，“将对象呈递为内联对象，但是对象的内容作为块对象呈递。即旁边的内联对象会被呈递在同一行内”。
- 建议：块状对象可以包含行内对象做为子对象，而行内对象不要去包含块状对象作为子对象，若要包含需慎重！看完或许你就明白了。
- 友情提醒：无论是块还是行内，都可以有margin、padding、border，并且不能继承！要是padding过大，导致这个块或这一行就很大，就会把border也撑大！
inline就不用解释了，它对于它里边的子块（就是block对象）是不能很好的显示，因为是把子块当成一行文字来显示的（当然一定要预先把block转化为inline，否则他还是会独霸一行，跳出span的！），就是说把它里边的内容统统当文字来显示。比如：
<span>
<img src="http://photocdn.sohu.com/20101026/Img276501779.jpg" style="border:2px solid black;"/>
<a href=http://www.baidu.com>我是超链接</a>
<ul>
我是ul中的内容
</ul>
</span><!--这里span包含了两个内容：img（inline对象）、a（也是inline对象）和ul（block对象）-->
显示效果如图：
这时我把ul转化为行内inline，这时span内的三个行内img、a还有ul，就可以同行显示了，但是由于外边的span是行内，所以ul只能显示一行文字的高度，效果如下图所示：
下面，我给html增加代码，也就是给span增加了一个兄弟，如下：
<span>
<img src="http://photocdn.sohu.com/20101026/Img276501779.jpg" style="border:2px solid black;"/>
<a href=http://www.baidu.com>我是超链接</a>
<ul>
我是ul中的内容
</ul>
</span>
<a href="http://www.baidu.com">我是和span平级的超链接！</a>
同时，修改css，我把span定义为block，ul还原为block，span变成了块状，可以包含ul了，但是span和它的兄弟a不能同行显示，因为span变为block以后又开始霸道了……
效果如图：
要想在变成盒子的同时，还具有行内的特点，也就是把span变成盒子，还要跟他的兄弟a同处一行，就需要把span变成inline-block！
这就是inline-block，可以理解为行内-块：行内的意思是内联对象，不那么霸道，对于兄弟姐妹（同
层次的标签）可以共处一行；块的意思是它可以包容更小的块作为子块。
我这里测试的是行内span，你也可以试试div！把它display为inline-block，是不是也既具有行内
又具有块的特点呢？
下一个计划测试float！