如果我将display：block或inline设置为<div>和<span>之间的区别是什么？</span> </div>

Question

<div style="display: inline"></div>
<span></span>

<div></div>
<span style="display:block></span>

<div style="display: inline-block"></div>
<span style="display: inline-block"></span>

如果我这样写，<div>和<span>之间有什么不同

Answer 1

就CSS而言，没有区别。无论你喜欢它的语义，你都可以设置任何元素的样式。

同样，就HTML而言，如何使用CSS设置它们的样式并不会影响它们的性质。 <div>始终接受任何流内容，通常表示为CSS中的块级元素，或短语内容，通常表示为CSS中的内联元素。但请注意，这两个概念之间没有必要的相关性。另一方面，<span>只能有短语内容。

在有效的HTML中，这意味着虽然<div>可以包含<span>，但<span>不能包含<div>。

这两个元素的相似之处在于它们本身不带语义;它们只是作为内容的分组元素，通常用于样式目的。

有关详细信息，请参阅<div>和<span>的HTML5规范。

Answer 2

<强> DIV

• A＆＃34;块级元素＆＃34;
• 可以包含所有其他元素！
• 只能在其他块级元素中
• 在页面上定义了一个矩形区域
• 尽量扩大
• 从＆＃34;新线＆＃34;开始，并且有一个＆＃34;回车＆＃34;最后，就像 <p>

<强>跨度

• ＆＃34;内联元素＆＃34;
• 不能包含块级元素!!
• 可以在任何其他元素内
• 定义了一条＆＃34;蛇＆＃34;在页面上
• 尽量减少
• 不会创建任何新行

从渲染的角度来看，

<span> == <div style="display: inline">

和

<div> == <span style="display: block">

但是，对于HTML语法，div不能嵌套在inline元素中，而span不能包含块级元素。 < / p>

神秘的"display: inline-block"

block vs inline vs inline-block

下面是一堆不同的显示：设置。

如您所见，inline-block是一种混合体：

• 创建一个矩形区域（块）
• 不会创建任何新行（因此＆＃34;在行＆＃34;）

了解更多信息

Div's with display inline-block display weird (CSS)

Difference between DIV as-is and a SPAN with display:block

http://quirksmode.org/css/css2/display.html

Answer 3

这一点基于HTML规范，span标记为inline元素，div标记为block元素，这两个标记可以使用{{ 1}} CSS中的规则。

因此，如果您更改display，则不会有任何差异。

但就这些通常使用的方式而言，您可以考虑display将这些部分包装在DOM中，div标记主要用于包装文本和内容。

查看HTML spec document以获取更多信息。