小编典典

块和内联块的宽度(100%)有什么区别?

css

我最近一直在尝试找出何时适合使用inline- blocks。它们似乎比仅一个block元素有用得多。实际上,内联块元素似乎能够执行块元素可以做的任何事情,但是要有一些额外的样式。

与的元素有display: inline-block; width: 100%;什么区别display: block;吗?(除了一个更长的事实?)


阅读 321

收藏
2020-05-16

共1个答案

小编典典

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

但是,有一个陷阱。

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

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

  • width: 100%您可能会怀疑,如果没有声明,则内联块将缩小以适合其内容。

  • 由于内联块是内联流动的,因此您无法使用自动左,右页边距将其居中。您text-align: center改为使用。不用说,它必须位于自己的行上,并且同一行上不能包含任何文本,但是如果您要进行设置,width: 100%那么这将不是问题。

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

如果您尝试创建基于块的布局,则应使用display: block。一般而言,在两者之间做出决定时,应始终默认为display: block,并且仅选择display: inline-block是否有充分理由(并且不,阻止利润率下降不是我认为的充分理由)。

2020-05-16