栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

但是,有一个陷阱。

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

text-indent
text-align
vertical-align
,等等。

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

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

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

    text-align: center
    改为使用。不用说,它必须位于自己的行上,并且同一行上不能包含任何文本,但是如果您要进行设置,
    width: 100%
    那么这将不是问题。

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

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

display: block
。一般而言,在两者之间做出决定时,应始终默认为
display:block
,并且仅选择
display: inline-block
是否有充分理由(并且不,阻止利润率下降不是我认为的充分理由)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442525.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号