您当前的位置:首页 > 网页设计 > Web开发 > 正文

display:inline | block |inline-block的区别

【字体大小: 2009-04-02 12:25 来源:站长中国 作者:编辑整理 

  display:block就是将元素显示为块级元素.

  block元素的特点是:

  总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

  display:inline就是将元素显示为行内元素.

  inline元素的特点是:

  和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。

  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

  inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:

  让一个inline元素从新行开始;让块元素和其他元素保持在一行上;控制inline元素的宽度(对导航条特别有用);控制inline元素的高度;无须设定宽度即可为一个块元素设定与文字同宽的背景色。

  display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

  inline-block的元素特点:

  将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。(准确地说,应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性)并不是所有浏览器都支持此属性,目前支持的浏览器有:Opera、Safari在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

  IE下块元素如何实现display:inline-block的效果?

  有两种方法:

  1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):

  div {display:inline-block;…}

  div {display:inline;}

  2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

  div {display:inline; zoom:1;…}

  以下用个例子来说明三者的区别和用法:

  1. <style> 
  2. div, span {  
  3.     background-color:green;  
  4.     margin:5px;  
  5.     border:1px solid #333;  
  6.     padding:5px;  
  7.     height:52px;  
  8.     color:#fff;  
  9. }  
  10. .b {  
  11.     display:block;  
  12. }  
  13. .i {  
  14.     display:inline;  
  15. }  
  16. div.ib {  
  17.     display:inline-block;  
  18. }  
  19. div.ib {  
  20.     display:inline;  
  21. }  
  22. a.ib {  
  23.     display:inline-block;  
  24. }  
  25. a.ib {  
  26.     display:block;  
  27. }  
  28. span.v {  
  29.     padding:0;  
  30.     margin:0;  
  31.     border:0;  
  32.     vertical-align:middle;  
  33.     height:100%  
  34. }  
  35. </style> 
  36. <div>div display:block</div> 
  37. <div class=”i”>div display:inline</div> 
  38. <div class=”ib”>div display:inline-block</div> 
  39. <span>span display:inline</span><span class=”b”>span display:block</span><span><a class=”ib”>a display:block</a></span><br /> 
  40. <div><span class=”v”></span>vertical-align:middle</div> 
    顶一下
    (1)
    100%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签: display inline block inline-block
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: