css - 宽度为 : 100%? 的 block 和内联 block 有什么区别

Question

我最近一直在尝试找出何时适合使用 inline-block。它们似乎比 block 元素有用得多。事实上，内联 block 元素似乎可以做 block 元素可以做的任何事情，但需要一些额外的样式。

display: inline-block; 元素是否有任何原因？ width: 100%; 与带有 display: block; 的元素有什么不同？ (除了一个更长的事实？)

我一直在通过阅读 w3c recommendation 来研究这个主题.我似乎找不到区别。

Answer 1

您所说的非常正确:“内联 block 元素似乎能够执行 block 元素可以执行的任何操作，但需要一些额外的样式。”这主要是因为两者的共同点是它们都是 block 容器。

但是，有一个问题。

一个 block 框参与一个 block 格式化上下文，一个内联 block 参与一个内联格式化上下文(尽管它为其后代建立一个 block 格式化上下文，就像 block 框在某些条件下所做的那样)。参见 section 9.4 .基本上，这意味着行内 block 被视为文本，这反过来意味着通常适用于文本的大多数属性也适用于行内 block 。这些属性包括 text-indent、text-align 和 vertical-align 等。

这可能会导致意外的副作用，您可以通过首先不使用 display: inline-block 来轻松避免这些副作用。参见 this question有关可能发生的事情的有趣示例。

行内 block 的盒模型也与 block 盒有所不同。 Section 10包含所有细节，但主要区别是:

• 如果没有 width: 100% 声明，您可能会怀疑，内联 block 将缩小以适合其内容。

• 因为内联 block 是内嵌的，所以您不能使用自动左右边距将其居中。您可以使用 text-align: center 代替。不用说，它必须在自己的行上，并且在同一行上没有围绕它的文本，但是如果您设置 width: 100% 那么这将不是问题。

• 行内 block 从不受margin collapse影响.

如果您尝试创建基于 block 的布局，您应该使用 display: block。一般来说，在两者之间做出决定时，您应该始终默认使用 display: block，并且只有在有充分理由(并且不，阻止 margin 崩溃不是我认为的好理由)。