我最近一直在尝试找出何时适合使用inline- blocks。它们似乎比仅一个block元素有用得多。实际上,内联块元素似乎能够执行块元素可以做的任何事情,但是要有一些额外的样式。
inline- block
block
与的元素有display: inline-block; width: 100%;什么区别display: block;吗?(除了一个更长的事实?)
display: inline-block; width: 100%;
display: block;
您所说的完全正确:“内联块元素似乎能够执行块元素可以做的任何事情,但要有一些额外的样式。” 这主要是由于两者的共同点是它们都是块容器。
但是,有一个陷阱。
块框参与块格式化上下文,内联块参与内联格式化上下文(尽管它为后代建立了块格式化上下文,就像块框在某些情况下一样)。见9.4节。基本上,这意味着将内联块当作文本对待,这又意味着通常应用于文本的大多数属性也将应用于内联块。这些特性包括text-indent,text-align和vertical-align,等等。
text-indent
text-align
vertical-align
嵌入式块的盒模型也与块盒的盒模型有所不同。第10节包含 _所有_实质性细节,但主要区别在于:
width: 100%您可能会怀疑,如果没有声明,则内联块将缩小以适合其内容。
width: 100%
由于内联块是内联流动的,因此您无法使用自动左,右页边距将其居中。您text-align: center改为使用。不用说,它必须位于自己的行上,并且同一行上不能包含任何文本,但是如果您要进行设置,width: 100%那么这将不是问题。
text-align: center
内联块 永远不会 受边距崩溃的影响。
如果您尝试创建基于块的布局,则应使用display: block。一般而言,在两者之间做出决定时,应始终默认为display: block,并且仅选择display: inline-block是否有充分理由(并且不,阻止利润率下降不是我认为的充分理由)。
display: block
display: inline-block