块和内联块的宽度（100％）有什么区别？

块和内联块的宽度（100％）有什么区别？

您所说的完全正确：“内联块元素似乎能够执行块元素可以做的任何事情，但要有一些额外的样式。” 这主要是由于两者的共同点是它们都是块容器。

但是，有一个陷阱。

块框参与块格式化上下文，内联块参与内联格式化上下文（尽管它为后代建立了块格式化上下文，就像块框在某些情况下一样）。见9.4节。基本上，这意味着将内联块当作文本对待，这又意味着通常应用于文本的大多数属性也将应用于内联块。这些特性包括

text-indent

，

text-align

和

vertical-align

，等等。

嵌入式块的盒模型也与块盒的盒模型有所不同。第10节包含 _所有_实质性细节，但主要区别在于：

• width: 100%

  您可能会怀疑，如果没有声明，则内联块将缩小以适合其内容。

• 由于内联块是内联流动的，因此您无法使用自动左，右页边距将其居中。您

  text-align: center

  改为使用。不用说，它必须位于自己的行上，并且同一行上不能包含任何文本，但是如果您要进行设置，

  width: 100%

  那么这将不是问题。

• 内联块 永远不会 受边距崩溃的影响。

如果您尝试创建基于块的布局，则应使用

display: block

。一般而言，在两者之间做出决定时，应始终默认为

display:block

，并且仅选择

display: inline-block

是否有充分理由（并且不，阻止利润率下降不是我认为的充分理由）。