SPAN与DIV(内联块)

Question

有没有理由使用a <div style="display:inline-block">而不是a <span>来布局网页？

我可以将内容嵌套在跨度内吗？什么是有效的,什么不是？

可以使用它来制作像布局一样的3x2表格吗？

<div>
   <span> content1(divs,p, spans, etc) </span>
   <span> content2(divs,p, spans, etc) </span>
   <span> content3(divs,p, spans, etc) </span>
</div>
<div>
   <span> content4(divs,p, spans, etc) </span>
   <span> content5(divs,p, spans, etc) </span>
   <span> content6(divs,p, spans, etc) </span>
</div>

Answer 1

根据HTML规范,<span>是一个内联元素,<div>是一个块元素.现在可以使用displayCSS属性进行更改,但存在一个问题:在HTML验证方面,您不能将块元素放在内联元素中,因此:

<p>...<div>foo</div>...</p>

即使您更改<div>为inline或,也不是严格有效inline-block.

所以,如果您的元素是inline或inline-block使用<span>.如果它是一个block级别元素,请使用a <div>.

Answer 2

如果你想拥有一个有效的xhtml文档,那么就不能在段落中放入div.

此外,具有属性显示的div:inline-block的工作方式与span不同.默认情况下,span是内联元素,您无法设置与块关联的宽度,高度和其他属性.另一方面,具有内联块属性的元素仍将与任何周围文本"流动",但您可以设置宽度,高度等属性.具有属性display:block的span将不会以相同的方式流动作为内联块元素,但将创建回车并具有默认边距.

请注意,并非所有浏览器都支持内联块.例如,在Firefox 2及更少版本中,您必须使用:

display: -moz-inline-stack;

它显示与FF3中的内联块元素略有不同.

有一个伟大的文章,在这里创建跨浏览器的inline-block的元素.

Answer 3

1. 内联块是将元素的显示设置为内联或阻止之间的中间点.它将元素保持在文档的内联流中,如display:inline,但您可以使用display:block来操作元素的框属性(宽度,高度和垂直边距).

2. 我们不能在内联元素中使用块元素.这是无效的,没有理由这样做.