block、inline和inline-block概念和区别

总体概念

1.block和inline完整确切的说是块级元素和内联元素。block元通常会显示为独立的一块，单独成一行；

inline元素则不会换行，会在同一行显示，直到改行排满。

2.常见的块状元素有：div, form, table, p, h1~h6, ul,ol,dl等；

常见的呢内联元素有：span,a,strong,em,label,input,img,select,br,a等；

3.block元素可以包含block元素和inline元素，但是inline元素只能包含inline元素。

4.一般来说，可以通过display:block和display:inline的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

display:block

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

2.block元素可以设置高度和宽度的属性。块级元素即使设置了宽度，仍然独占一行；

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

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不会产生边距效果。

display:inline-block

将对象呈现为inline对象，但是对象的属性作为block元素呈现。内联对象会在一行显示，但是具有块级元素的属性。比如给a元素设置inline-block属性，他就会具有block的宽度高度特性又具有自身的inline同行的特性。

补充说明

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。

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