您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

但是,有一个陷阱。

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

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

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

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

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

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

其他 2022/1/1 18:15:56 有487人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶