block，inline,inline-block的区别

block: 英语翻译过来是“块”意思，就跟小时候玩过的积木方块同样，一块一块往上搭。

inline: 英语翻译过来就是“内联”的意思，内联很差理解，个人理解就是行内元素；

block和inline都是比较通俗的说法，block应该是“block-level elments”(块级元素)，inline应该是“inline elements”（行内元素）

细节对比：

display:block的元素;

　　一、在网页中会单独占一行，默认状况下他的宽度是填满父级宽度，即便他的宽度比浏览器窗口小不少也不会让后面的元素挤上来跟他同占一行（比较小气）;

　　二、能够设置width和height;

　　三、还能够设置padding和margin；

display:inline；

　　一、这样样式的元素就不同啦，他比较大方，他能够和多个inline元素同占一行，直到他们的宽度总和超过了浏览器窗口的宽度才会将多出来的元素往下挤（由于实在太挤了）；

　　二、不能用width和height，由于这两个个属性在inline身上无效；

　　三、padding-left、padding-left、margin-left、margin-right有效，其余方向上（上下）的padding和margin属性无效；

display：inline-block;

　　一、简单来讲就是将对象呈现为inline对象，可是对象的内容做为block对象呈现。但width、height属性对他们仍有效；

 

注意：IE（低版本IE，IE8及以上支持）原本是不支持inline-block的，因此在IE中对内联元素使用display:inline-block，理论上IE是不识别 的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

那么如何让IE低版本支持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-block;
     zoom:1;
}

 

 

常见的块级元素：div、p、form、h1-h六、pre、ol、ul、dl等等；

常见的内联元素：span、a、img、input、textarea、br、em、label、strong、select等等