CSS:display:block; vs display:table;

B T*_*B T 15 html css html-table css3

有没有之间的差异display:block;display:table;?它看起来像包含dom节点的显示类型table-rowtable-cell节点无关紧要.MDN表示,display:table;它使其表现得像一个表,但没有详细说明该行为是什么.那是什么行为?

同样,display:inline-block;和之间有区别display:inline-table;吗?

小智 7

两者都是块级的,因为默认情况下它们不会显示在其他任何东西旁边。

元素的实际显示存在显着差异。display: block;将扩展到可用空间的 100%,而display: table;仅与其内容一样宽。

此外,正如其他人所提到的,display: table;需要获取display: table-cell;或其他table-东西才能在后代中工作。

我只知道这一点,因为我刚刚遇到了试图display: table;填充容器宽度的问题。我一直无法看到display: inline;和的显示是否有差异display: inline-table;

https://jsfiddle.net/nnbonhc6/


Jas*_*son 6

比较两者(块和表),我不知道你会在真空中看到的任何核心差异(可能是次要的).我认为主要的差异是针对儿童的.表和他们的孩子与div和孩子有着非常不同的属性/关系.

至于内联块和内联表,请参阅:内联块和内联表之间的区别是什么?

本文(http://css-tricks.com/almanac/properties/d/display/)提供了一些有趣的信息,特别是关于与表相关的所有不同显示属性.


Ale*_*x W 6

我今天正在研究这个,我发现 CSS 规范的这一部分很有帮助:http : //www.w3.org/TR/CSS21/tables.html#model

尤其,

表格生成一个称为表格包装盒的主要块框,其中包含表格框本身和任何标题框(按文档顺序)。表格框是一个块级框,包含表格的内部表格框。

据我了解,这实质上意味着浏览器会为任何带有display: table!


jos*_*lvo 6

似乎存在的一个区别是display:table清除该行(就像display:block那样)但不会扩展以填充该行(显示块将占用最大宽度,内联则不会)

所以你可以得到一个盒子,它会随着你的内容调整大小,但保持在它的“行”中