block，inline,inline-block的区别

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

inline: 英语翻译过来就是“内联”的意思，内联不好理解，我的理解就是行内元素；

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

细节对比：

display:block的元素;

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

　　2、可以设置width和height;

　　3、还可以设置padding和margin；

display:inline；

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

　　2、不能用width和height，因为这两个个属性在inline身上无效；

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

display：inline-block;

　　1、简单来说就是将对象呈现为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-h6、pre、ol、ul、dl等等；

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

 

转载于:https://www.cnblogs.com/hongrunhui/p/4324532.html