块和内联块的宽度有什么区别:100%？

Question

我最近一直想弄清楚什么时候使用inline-blocks 是合适的.它们似乎比一个block元素更有用.实际上,内联块元素似乎能够执行块元素可以执行的任何操作,但具有一些额外的样式.

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

我一直在阅读w3c的建议,正在研究这个主题.我似乎无法找到差异.

Answer 1

你所说的非常正确:"一个内联块元素似乎可以做任何块元素可以做的事情,但有一点额外的样式." 这主要是因为两者都有一个共同点,就是它们都是块状容器.

然而,有一个问题.

块框参与块格式化上下文,并且内联块参与内联格式化上下文(尽管它为其后代建立块格式化上下文,就像在某些条件下块框一样).见9.4节.基本上,这意味着内联块被视为文本,这反过来意味着通常应用于文本的大多数属性也适用于内联块.这些特性包括text-indent,text-align和vertical-align,等等.

这可能会导致不良副作用,您可以通过不display: inline-block首先使用来轻松防止这种副作用.请参阅此问题以获取可能发生的有趣示例.

内联块的盒子模型也与块盒有所不同.第10节包含所有细节,但主要区别在于:

• 如果没有width: 100%声明,您可能已经怀疑,内联块将缩小以适应其内容.

• 由于内联块以内联方式流动,因此无法将其与自动左右边距对齐.你text-align: center改用.不言而喻,它必须在它自己的行上,并且在同一行上没有文本围绕它,但如果你正在设置width: 100%那么这将不是问题.

• 内联块永远不会受到保证金崩溃的影响.

如果您正在尝试创建基于块的布局,则应该使用display: block.一般来说,在两者之间做出决定时,你应该总是默认display: block,并且只选择display: inline-block你是否有一个很好的理由(而且,不会阻止保证金崩溃不是我认为的一个很好的理由).

Answer 2

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

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

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

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

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