display:block | inline | inline-block的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:block | inline | inline-block的区别相关的知识,希望对你有一定的参考价值。

display:block;

1.默认宽度为父元素宽度。

2.可设置宽高。

3.换行显示。

 

display:inline;

1.默认宽度为内容宽度。

2.不可设置宽高。

3.同行显示。

 

display:inline-block;

1.默认宽度为内容宽度。

2.可设置宽高。

3.同行显示。

4.整块换行。

例:input,buttom,select等表单元素。

 

以上是关于display:block | inline | inline-block的区别的主要内容,如果未能解决你的问题,请参考以下文章

display:block;inline;inline-block大总结

display:block | inline | inline-block的区别

将 slideToggle() 行为更改为 display:inline-block 而不是 display:block?

display:inline-block

为啥以边距 0 自动居中适用于 display:block 但不适用于 display:inline-block ?

display:block,inline,inline-block,none的区别