我最近一直在尝试弄清楚什么时候适合使用inline-blocks。它们似乎比仅仅一个有用得多block元素。事实上，内联块元素似乎能够做块元素能做的任何事情，但需要一些额外的样式。
元素是否有任何原因display: inline-block; width: 100%;与以下元素有任何不同display: block;？ （除了一个更长的事实？）
我一直在通过阅读来研究这个主题w3c推荐 http://www.w3.org/TR/CSS2/visuren.html。我似乎找不到什么不同。
您所说的非常正确：“内联块元素似乎能够执行块元素可以执行的任何操作，但需要一些额外的样式。”这主要是因为两者的共同点是它们都是块容器。
然而，有一个问题。
块框参与块格式化上下文，内联块参与内联格式化上下文（尽管它为其后代建立块格式化上下文，就像块框在某些条件下所做的那样）。看第 9.4 节 http://www.w3.org/TR/CSS21/visuren.html#normal-flow。基本上，这意味着内联块被视为文本，这又意味着通常适用于文本的大多数属性也适用于内联块。这些属性包括text-indent, text-align and vertical-align等。
这可能会导致不良副作用，您可以通过不使用来轻松预防display: inline-block首先。看这个问题 https://stackoverflow.com/questions/16365969/inherited-text-indent-value-behavior-when-changing-display-value-from-block-to-i举一个有趣的例子来说明可能发生的情况。
内联块的盒模型也与块盒的模型有所不同。第10节 http://www.w3.org/TR/CSS21/visudet.html包含all本质细节，但主要区别是：
如果没有width: 100%声明，正如您可能怀疑的那样，内联块将缩小以适合其内容。
由于内联块内联流动，因此您无法使用自动左右边距将其居中。你用text-align: center反而。不用说，它必须在自己的行上，并且在同一行上没有围绕它的文本，但是如果您设置width: 100%那么这就不成问题了。
内联块是never受到影响利润崩溃 http://www.w3.org/TR/CSS21/box.html#collapsing-margins.
如果您尝试创建基于块的布局，您应该使用display: block。一般来说，在两者之间做出决定时，您应该始终默认display: block，并且只选择display: inline-block如果你有一个很好的理由（不，阻止保证金崩溃不是我认为的一个很好的理由）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
