CSS测试实录一：display的块状元素和行内元素的试验

经常会碰到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！