26

我最近一直在试图弄清楚什么时候适合使用inline-blocks. 它们似乎远比一个block元素有用得多。事实上，inline-block 元素似乎可以做任何块元素可以做的事情，但需要一些额外的样式。

是否有任何理由与元素有display: inline-block; width: 100%;任何不同display: block;？（除了一个更长的事实之外？）

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

4

2 回答 2

34

你说的非常正确：“一个 inline-block 元素似乎可以做任何块元素可以做的事情，但需要一点额外的样式。” 这主要是因为两者的共同点是它们都是块容器。

但是，有一个问题。

块盒参与块格式化上下文，而内联块参与内联格式化上下文（尽管它为其后代建立块格式化上下文，就像块盒在某些条件下所做的那样）。请参阅第 9.4 节。基本上，这意味着内联块被视为文本，这反过来意味着通常适用于文本的大多数属性也适用于内联块。这些属性包括text-indent、text-align和vertical-align等。

这可能会导致不希望的副作用，您可以通过不display: inline-block首先使用来轻松预防。有关可能发生的事情的有趣示例，请参阅此问题。

内联块的盒子模型也与块盒子的模型有些不同。第 10 节包含所有细节，但主要区别在于：

  • 如您所料，如果没有width: 100%声明，内联块将缩小以适应其内容。

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

  • 内联块永远不会受到margin collapse的影响。

如果您尝试创建基于块的布局，则应该使用display: block. 一般来说，在两者之间做出决定时，您应该始终默认为display: block，并且只有在您有充分理由时才选择display: inline-block（不，阻止保证金崩溃不是我认为的充分理由）。

于 2013-07-06T06:22:27.267 回答
5

我会回应@BoltClock 所说的一切；他提出了很多好的观点。

我还要补充一点，因为 aninline-block被视为文本，所以周围的空白也被视为文本，因此以它不会用于block元素的方式发挥作用。在尝试inline-block用于布局时，这经常会引起人们的注意。这可能是使用inline-block.

另一个稍微微妙的点特别适用于您的情况，即设置时width:100%。在这种情况下，您需要注意您使用的是哪种盒子模型，因为标准盒子模型会将您的边框、填充和边距置于元素宽度之外。因此，如果您使用边框、填充或边距，您的元素实际上会占用比 100% 宽度多一点的空间。

这一点同样适用于blockandinline-block元素，但更有可能发生，inline-block因为不同之处在于block通常不需要设置为，width:100%因为它默认扩展以填充宽度，并且没有盒子模型导致它越过边缘。

为避免这种情况，您可以使用 切换框模型box-sizing:border-box，以便将边框等放置在框内，因此如果您要求with:100%，这就是您将得到的。请参阅MDN box-sizing 页面了解更多信息。

于 2013-07-10T09:03:37.153 回答