block,inline,inline-block的区别

block

1，表现为块级元素。
2，元素最后自动换行。
3，一些默认块级元素：div,ul,ol,dl,img,p….
4，块级元素里面可以放内联元素.但是应该据事实来看，不一样的标签内嵌的不一样。比如P标签，内嵌的只能是内联元素
5，默认填满父元素
6，可以设置width,height,margin,padding

inline

1，表现为行级元素(内联元素)。
2，元素最后不换行。
3，一些默认行级元素：span,a,input,button….
4，内联元素里面不能放块级元素
5，直到内容打到边缘才换行。不一定会填满父元素
6，width,height属性失效。水平方向的Margin,padding可以，竖直方向不行。但也应该由情况而定，例如input标签就可以设置height等。可以设置行高line-height.

inline-block

1，外部表现为内联元素，内部表现为块级元素。
2，该元素本身最后不换行，内部元素换行。
3，无默认元素。
4，可以放任意元素，一般是块级元素
5，外部不换行，但会填满父级节点。当设置为浮动时，父级依然会被撑开。
6，外部表现为内联，则不会换行。内部表现为块级元素，则设置width,height,margin,padding会生效
当有浮动元素时，不需要清除浮动。
7，低版本IE不支持inline-block，在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

最后

以上就是包容蛋挞为你收集整理的block,inline,inline-block的区别的全部内容，希望文章能够帮你解决block,inline,inline-block的区别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。