CSS，使用display：table与before伪元素

Question

CSS，使用display：table与before伪元素

htmlcss

8

我正在寻找最佳的清除浮动方法，发现了这个完美解决方案。如果你看一下答案，会发现该解决方案使用display:table而不是display:block，原因已经解释如下：

引用：

只有在使用:before来包含子元素的顶部边距时，才需要使用table而不是block。

我试着理解这个意思，做了一些测试，但是我无法弄清楚为什么要使用display:table。如果有人能提供一个代码示例来展示差异和需要使用display:table的原因，那就太好了。

编辑：这里有一个演示，我试图测试它们之间的区别，我确定有区别，但我不知道该测试什么。

澄清编辑：我的问题不是关于显示block/table的区别，我的问题是关于为什么使用display:table而不是display:block(与清除浮动相关)，Bryan从这个答案中提供了一个解释，但我无法理解原因，如果有人能解释一下原因，并可能提供一个说明差异的代码示例。

- Aviel Fedida

https://dev59.com/jmUo5IYBdhLWcg3wkQJq - himanshu

http://css-tricks.com/almanac/properties/d/display/ - himanshu

@himanshu，我知道显示属性之间的区别，我的问题是要理解为什么display:table用于包含子元素的顶部边距（来自我的问题），如果您可以提供代码示例... - Aviel Fedida

这里他用示例解释了CSS堆叠与display:table。 - himanshu

1

@himanshu，我很感激你提供的链接，但你能解释一下“包含子元素的顶部边距”是什么意思吗？ - Aviel Fedida

2个回答

-2

以下是关于display:table和display:block的主要区别：

display:table将元素显示为表格。嵌套元素应该显示为table-row和table-cell，模仿传统的TR和TD。

实时演示

enter image description here

display:block 表示元素显示为块，就像段落和标题一样。块元素在上下方都有一些空白，并且不允许任何 HTML 元素与其相邻，除非另有规定（例如通过向另一个元素添加浮动声明）。

实时演示

enter image description here

更多细节请点击此处

- Kalu Singh Rao

嘿@Singh，感谢你的回答，但我的问题不是关于表格/块如何显示的方式，我的问题是关于我在问题中提到的语句：“仅当使用:before来包含子元素顶部间距时，使用表格而不是块才是必要的。” - Aviel Fedida

请按照此处的说明学习如何正确引用外部来源：http://stackoverflow.com/help/referencing - BoltClock

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

你引用的评论和代码来自于 Nicolas Gallagher 提出的微型清除浮动技巧，正如在那个问题的最佳答案中提到的那样。Nicolas 写了一篇介绍这种技术的article（由于某种原因没有在其他答案中链接），其中他解释了为什么要使用 display: table，如下所述：

这个“微型 clearfix”生成伪元素并将它们的 display 设置为 table。这创建了一个匿名的表格单元格和一个新的块级格式化上下文，这意味着 :before 伪元素防止了顶部边距折叠。 :after 伪元素用于清除浮动。因此，没有必要隐藏任何生成的内容，并且所需的代码总量减少了。

更详细地说，如果一个元素有一个第一子元素，并且两者都是 display: block，并且子元素有一个顶部边距，则会发生的情况是，子元素的边距将与父元素（如果有）合并或折叠，导致子元素的顶部边距似乎从中消失，这有时可能是不希望的。要了解此效果的示例，请参见 this question。

由于明显的原因，边距不会通过表格元素折叠，这就是为什么 display: table hack 起作用的原因。

因此，基本上，display: table — 以及扩展的 :before 伪元素 — 对 clearfix 不是必需的，只是阻止元素和其第一个子元素之间的块级边距折叠的附加 hack。如果你想做的只是清除内部浮动，这就是 clearfix 的目的，那么你不需要 display: table 或 :before。