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

为什么将内联块元素向下推?

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

为什么将内联块元素向下推?

基本上,您在代码中添加了更多的混乱情况,这造成了更多的混乱,因此,首先,我尝试消除妨碍理解真正问题的混乱情况。

首先,我们必须确定真正的问题是什么? 其“

inline-block
”元素为何被向下推。

现在我们开始理解它,并先消除混乱。

1- 为什么不给所有三个div相同的边框宽度? 让我们给它。

2- 浮动元素和向下插入的内嵌块元素有什么联系吗?不,与它无关。

因此,我们完全删除了该div。您还看到内联块元素被向下推的相同行为。

现在轮到一些文献来理解线框的概念,以及如何将它们放在同一行中,特别是仔细阅读最后一段,因为这是您问题的答案。

“ inline-block”的基线是正常流中其最后一个线框的基线,除非它没有流入流线框,或者如果其“ overflow”属性的计算值不是“
visible”,则在这种情况下,基线是下边距。

如果您不确定基线,那么这里是简单的简短解释。

除了’gjpqy’以外的所有字符都写在基线上,您可以认为基线就像您在这些“随机字符”下方绘制一条与下划线相同的简单水平线一样,它将成为基线,但现在如果您编写任何“gjpqy”同一行上的一个或多个字符,则这些字符的下部将落在该行下方。

因此,可以说除“ gjpqy”以外的所有字符都完全写在基线之上,而这些字符的某些部分则写在基线之下。

3-为什么不检查生产线的基线在哪里?我添加了一些字符来显示该行的基线。

4-
为什么不在我们的div中添加一些字符以在div中找到其基线?此处,在div中添加了一些字符以阐明基线。

现在,当您了解基线时,请阅读以下有关内联块基线的简化版本。

i)如果有问题的内联块的溢出属性设置为可见(默认情况下,因此无需设置)。 然后,其基线将是该行包含块的基线。

ii)如果所讨论的内联块的溢出属性设置为“其他可见”。 然后,其底边距将在包含框的线的基线上。

  • 第一点详细

现在再来看一看,以澄清您的概念greendiv发生了什么。如果仍然有任何困惑,则在此处添加更多靠近绿色div的字符以建立包含块的基线,并对齐绿色div基线。

好吧,我现在声称它们具有相同的基准?对?

5- 那么为什么不重叠它们,看看它们是否彼此合适?因此,我带来了第三个div -left:35px;检查他们现在是否具有相同的基准?

现在,我们已经证明了我们的第一点。

  • 第二点详细

好了,在解释了第一点之后,第二点很容易理解,您会看到将溢出属性设置为可见(隐藏)以外的第一格的底边在该线的基线上。



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

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

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