Css 块和宽度为100%的内联块之间有什么区别？

我最近一直在试图找出何时使用

inline block

s是合适的。它们似乎比一个

块

元素有用得多。事实上，内联块元素似乎可以做块元素可以做的任何事情，但需要一些额外的样式

是否有任何原因导致元素显示为

display:inline block；宽度：100%与具有
显示：块的元素不同？（除了一个更长的事实之外？）

我一直在通过阅读报纸来研究这个话题。我似乎找不到区别。
您所说的非常正确：“内联块元素似乎可以做块元素可以做的任何事情，但需要一些额外的样式。”这主要是因为它们都有一个共同点，即它们都是块容器

然而，有一个陷阱

块框参与块格式上下文，内联块参与内联格式上下文（尽管它为其子体建立块格式上下文，就像块框在某些条件下所做的那样）。看见基本上，这意味着将内联块视为文本，这反过来意味着通常应用于文本的大多数属性也将应用于内联块。这些属性包括
文本缩进
、
文本对齐
和
垂直对齐
，等等

这可能会导致不希望出现的副作用，如果不首先使用
display:inline block
，您可以很容易地防止这些副作用。有关可能发生的情况的有趣示例，请参见

内联块的长方体模型也与块长方体模型有所不同。包含所有基本细节，但主要区别在于：


如果没有
width:100%
声明，正如您可能怀疑的那样，内联块将收缩以适合其内容

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

内联块从不受影响


如果试图创建基于块的布局，则应使用
display:block
。一般来说，当决定两者之间时，你应该总是默认为“代码>显示：块，并且只选择<代码>显示：联机块< /代码>如果你有一个很好的理由（并且，不，阻止余量崩溃不是我认为是一个很好的理由）。他提出了很多好的观点

我还要补充一点，因为
内联块
被视为文本，所以周围的空白也被视为文本，因此以
块
元素所不具备的方式发挥作用。当人们试图使用
内联块
进行布局时，这经常会引起注意。这可能是使用
内联块
的最大“陷阱”

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

这一点同样适用于
块
和
内联块
元素，但更可能发生在
内联块
中，因为区别在于
块
通常不需要设置为
宽度：100%
，因为它默认为展开以填充宽度，没有盒子模型导致它越过边缘

为了避免这种情况，您可以使用
框大小：border-box
切换框模型，以便将边框等放置在框内，因此，如果您要求使用
：100%
，您将得到这样的结果。有关更多信息，请参阅。
请参阅演示最显著差异的示例：