两者之间有什么不同 <div> <span>如果我将display设置为：阻止还是内联？</span>

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

• 一个“块级元素”
• 可以包含所有其他元素！
• 只能在其他块级元素内
• 在页面上定义一个矩形区域
• 尝试尽可能宽
• 从“换行”开始，并在末尾带有“回车”，例如<p>

跨度

• 一个“内联元素”
• 不能包含块级元素！！
• 可以在任何其他元素内
• 在页面上定义“蛇”
• 尽量缩小
• 不创建任何新行

从渲染的角度来看，

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

和

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

至于HTML语法，但是div不能嵌套在内inline元素inline ，而span不能包含块级元素。

神秘的"display: inline-block"

block vs inline vs inline-block

以下是一堆具有不同显示方式的设置：

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

• 创建一个矩形区域（块）
• 不创建任何新行（因此为“ in line”）

欲获得更多信息

带显示内嵌块显示怪异（CSS）的Div

DIV的原样与带有display：block的SPAN之间的区别

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

Answer 3

重点是基于HTML规范， span标签是inline元素，而div标签是block元素，这两个可以使用CSS中的display规则进行更改。

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

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

查阅HTML规范文档以获取更多信息。