css中inline-block什么意思

在css中，inline-block指的是“内联块状元素”，它同时具备内联元素、块状元素的特点；inline-block元素可以和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

block
块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

,

,

,

,

和
• 是块元素的例子。
  inline
  内联元素特点：
  
  1、和其他元素都在一行上；
  
  2、元素的高度、宽度及顶部和底部边距不可设置；
  
  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
  
  , , , , , 和是inline元素的例子。
  inline-block
  内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。
  
  inline-block 元素特点：
  
  1、和其他元素都在一行上；
  
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  
  说明：
  
  并不是所有浏览器都支持此属性，目前支持的浏览器有：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不会消失）。代码如下（...为省略的其他属性内容）：
  
  1
  
  2
  
  div {display:inline-block;...}
  
  div {display:inline;}
  
  2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
  
  1
  
  div {display:inline; zoom:1;}
  
  总体概念
  block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
  
  大体来说html元素各有其自身的布局级别（block元素还是inline元素）：
  
  常见的块级元素有 p, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
  常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
  block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
  
  一般来说，我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。