Question

div中的属性display:inline和display:block有什么区别?

Answer 1

一、作用不同

1、display:inline：设置对象做为行内元素显示，inline是内联对象的默认值。

2、display:block：设置元素将显示为块级元素，此元素前后会带有换行符。

二、对应不同

1、display:inline： 对应不显示为 display:none。

2、display:block：对应不显示为 hidden。

三、用法不同

1、display:inline：用在 <ul> 下的 <li> 中 内联 block一般一个块占一行，除非float inline是自动排为一行，就象段内的文字一样，可成为多行。

2、display:block：block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是加了 display:block 属性就不同。<span style= "display:block "> SPAN1 </span>。

参考资料来源：百度百科-display:inline

参考资料来源：百度百科-CSS语法

Answer 2

Vue实践-CSS样式position/display/float属性对比使用

Answer 3

display:inline; 元素会被显示为内联元素，元素前后没有换行符.
display:block 元素将显示为块级元素，此元素前后会带有换行符.
举例：
1.display:block
<span style="display:block">11111111</span><span>2222222222222</span>
按照常理来说 上面二个span应该是一行显示，因为span本来就是内联元素.(相当于天生就有display:inline属性一样);可是给其中一个span加了display:block后。加过display:block的span他就会独占一行。

2.display:inline
<div style="display:inline">11111111</div><div style="display:inline">22222222</div>
常理，上面代码在浏览器中应该是二行，但是加了display:inline后，就会显示在一行。

追问

原来是这样，谢谢。