B T*_*B T 15 html css html-table css3
有没有之间的差异display:block;和display:table;?它看起来像包含dom节点的显示类型table-row和table-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/
比较两者(块和表),我不知道你会在真空中看到的任何核心差异(可能是次要的).我认为主要的差异是针对儿童的.表和他们的孩子与div和孩子有着非常不同的属性/关系.
至于内联块和内联表,请参阅:内联块和内联表之间的区别是什么?
本文(http://css-tricks.com/almanac/properties/d/display/)提供了一些有趣的信息,特别是关于与表相关的所有不同显示属性.
我今天正在研究这个,我发现 CSS 规范的这一部分很有帮助:http : //www.w3.org/TR/CSS21/tables.html#model
尤其,
表格生成一个称为表格包装盒的主要块框,其中包含表格框本身和任何标题框(按文档顺序)。表格框是一个块级框,包含表格的内部表格框。
据我了解,这实质上意味着浏览器会为任何带有display: table!
似乎存在的一个区别是display:table清除该行(就像display:block那样)但不会扩展以填充该行(显示块将占用最大宽度,内联则不会)
所以你可以得到一个盒子,它会随着你的内容调整大小,但保持在它的“行”中