有美食云餐饮:display:inline block详解

来源：百度文库编辑：中财网时间：2024/05/09 05:39:56

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

block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度

,
,
和
是块元素的例子。

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

inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
, , , , , 和是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;…}

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

div display:block
div display:inline
div display:inline-block
span display:inlinespan display:blocka display:block
vertical-align:middle

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

参考:

Blank:display:inline-block的深入理解

首先先对行内元素（inline elements，比如span,a,b等。）和块元素(block elements，比如div,h1,p等)进行一下知识回顾.简而言之，它们的区别可以分为下几点

   1. 块元素会自动在末尾加一个换行，而行内元素不会。
   2. 块元素可以定义自身的高度（width）和宽度(height),而行内元素不可以。
   3. 块对象定义的自身垂直边距可以改变行高，而行内元素虽然可以定义但改变不了行高。

在前端开发中，我们遵循结构，表现，行为相分离。所以将修饰型图片利用css的background把它写在表现层中。那最常见的就是icon的应用。如：

去我的flickr相册。这是利用行内元素的左侧内间距（padding-left）实现的icon+文字的组合。

但有时候，我们还需要另外一种表现形式，只是单独的icon而不需要文字或者链接，并且是图文混排。也许你想只要把span里面的文字删除不就可以了么，实际上并非如你所愿。

。如果你现在在ie下，肯定什么也看不到。

原因是行内元素在内容为空的情况下,ie认为它的width为0。

,现在在ie下可以看到了。

根据行内元素的特性，并不能为其设置一个宽度来解决，所以只能在里面加一个毫无意义的空格用来占位，来生成一个高度值，但在无css的条件下（在 spider的眼里），无法得知它为何物。如下:

所以这样的解决方案让人无法接受。

使用inline-block就可以解决这个问题

通过将外包元素设置为inline-block，利用有inline的行级特性和block的指定高度和宽度的特性。再通过将内嵌标签中的解释文字隐藏来实现该效果。

你会在这里看到两个并排的icon，它们是“~这里飘过无尽的解释性文字啊！~~这里飘过无尽的解释性文字啊！~”，flick的icon，它和文字在一起。

代码如下：

.icon{
display:inline-block;
/* ie8,firefox3,safari,opera /
display:-moz-inline-stack;
/ firefox2,-moz-inline-box其实也可以，但在某些情况下会有些异常-_-b /
display:inline;
zoom:1;
/*
ie6,7，在ie中，如果该class应用在行内元素中的时候， display:inline-block 会触发layout.
从而使该元素拥有inline-block的特性，但为了考虑到通用性，使其能在块元素中应用，
所以使用zoom：1来触发layout
/
width:20px;
height:20px;
vertical-align:middle; / 这个用来对opera的hack，使其垂直居中 /
overflow:hidden; / 针对ie，防止内容溺出，造成的高度及宽度改变 /
background:url("http://l.yimg.com/a/i/ww/sp/trough_1.8.gif") -400px -680px;
}
.icon i{
visibility:hidden; / 将解释性文字隐藏 /
}

~这里飘过无尽的解释性文字啊！~*

在最后，还要多说几句-moz-inline-stack，在firefox2中它还存在一下小bug.当它所应用的外包装器（wrapper）的 display为inline的时候，它所包含的a或button将无法点击或者无法选取。我们需要通过position:relative来hack掉这个bug。Sigh~。

    * 在 firefox2里面我终于可点了
    * 我也是a可为什么我却不能点？？—_—|||

关于inline-block的详细分析可以参考学鹍的CSS{display:inline-block}或者圆心的display:inline- block的深入理解

FALEX PIN&UEE BLOCK HISTORY DISPLAY应该如何翻译 inline 语法 inline 的语法问题在线等。inline skate 是什么意思。 city block BLOCK是什么! Display 是什么意思？ Analog Display phage display Combine of inline NIDS & NIPS是什么意思？ Small block&large block nand flash 区别 seat, block, blow, bieak 如何BLOCK网站初始化BLOCK失败 3d block Small Block goes big block buster是什么 CITY BLOCK 40SPF block exemption 指什么？请问 finally block是什么意思什么是Boot Block? flash block verify error block competition是什么意思？ NVIDIA Display Driver Service