关于inline、block、inline-block

首先解释一下什么是块级元素与行级元素（内联元素）

1. block元素通常被显示为独立的一块，单独占一行；inline元素前后不会产生换行，一系列     inline元素都在一行内显示，直到这一行排满。

常见的块级元素有 div,form,table,p,pre,h1~h6,dl,ol,ul等。

常见的内联元素有 span,a,strong,em,label,input,select,textarea,img,br等（元素除了可以分为块级元素和行内元素，还可以分为替换元素和非替换元素；像img br hr这样 的都是替换元素，浏览器遇到它们会将它替换为其他东西例如图片、换行符等）。

2. block元素可以包含block元素和inline元素；但是inline元素只能包含inline元素。ps:这是大概说法，每个特定元素能包含的元素也是特定的，具体到个别元素，这是不适用的例如 P元素，只能包含inline元素，而不能包含block元素。

1. display:inline

1. inline元素不会独占一行，多个行内元素会排列在同一行，直到一行排不下才会换行，其宽度随元素的内容而变化。

2. inline元素设置width height属性无效。

3. inline元素的margin和padding属性  水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果，但垂直方向的padding-top，padding-bottom，margin-top，margin-bottom不会产生边距效果。

2. display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下block元素宽度自动填满其父级元素宽度。

2. block元素可以设置width，height属性，即使设置了宽度，依然独占一行。

3. block元素可以设置margin和padding属性。

3. display:inline-block

将对象呈现为inline对象，但对象的内容作为block对象呈现。即使其既具有block的宽高特性又具有inline的同行特性。

并不是所有浏览器都支持此属性，目前支持的浏览器有：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中块元素呈递为内联对象。（Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。）

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;...}

PS：Zoom属性是IE浏览器的专有属性， 它可以设置或检索对象的缩放比例。当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也可以解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

关于它们的居中方法详解