wscops 发表于 2018-2-4 13:31:41

关于内联元素幽灵节点的疑问



P120页最后一段话: (1)多行文字使用一个标签包裹,然后设置display为inline-block,好处在于。。。以及产生一个非常关键的行框盒子,。。。每个行框盒子都会附带一个产物---‘幽灵空白节点’。

上面这句是否与下面的这句话矛盾?

P126页 5.3上面的这句话
要避免“幽灵空白节点的干扰”,可以设置span元素 display:inline-block,创建一个独立的‘行框盒子’。。。

既然设置为inline-block会产生幽灵空白节点,又何来通过设置display为inline-block来避免幽灵空白节点干扰?
并且经过我实测,P126页5.3节上面的 不论是否设置span的display为inline-block,span元素的line-height都是20px;设置span的display为inline-block只会影响其父元素box的line-height.即 如果span的line-height为20px;box的line-height设置为96px, 此时设置span display: inline-block,box的line-height为96px,span的line-height为20px,如果不设置span display: inline-block,则box的line-height为20px,span的line-height为20px.

麻烦解释一下,谢谢。


wscops 发表于 2018-2-4 14:10:49

还与一个疑问,普通的display为inline的元素前面是否有幽灵空白节点呢?还是只有display为inline-block的 元素有?我看所有你描述幽灵节点的地方都用了display: inline-block,故有此疑问。

demon-monk 发表于 2018-2-13 12:17:02

我在chrome和Firefox中的测试inline空元素是不会产生幽灵空白节点的。但我还是不是很明白到底什么时候会产生?这是我在第三章里的提问,希望可以提供更多信息。http://bbs.cssworld.cn/forum.php?mod=viewthread&tid=25&extra=page%3D1

P.S. 感觉这个论坛根本没啥人,问题也没人回。鑫神应该也不在吧。。。

deepbreaths 发表于 2018-2-15 01:42:24

本帖最后由 deepbreaths 于 2018-2-15 02:15 编辑

首先楼主实验的时候应该是span里面只有一行文字,如果是一行文字的话,前面css设置的是box的line-height为96px,而span的line-height设置的是20px,则无论设置span的display为inline-block还是没有设置,我这里实验得到父类box的line-height都会是96px,不知道楼主为什么会得到变成了20px。其实书作者在这里把span元素的display设置为inline-block,主要是因为作者在书里面是针对多行文字进行居中,所以必须把里面的多行文字 包成一个内联块状的元素,不然没有设置的后果就是,父元素box若设置line-height为96px,因为里面有n行文字即n行内联元素,也就是有n个行框盒子,实际box最终的高会是96*n,因为n个行框盒子前面有n个幽灵空白节点,当设置line-height为96px是就是把n行的每个幽灵空白节点都设置成96px高。
要解决这个问题就需要把span的display设置成inline-block,这样,span内部盒子就变成的块状包含那n行文字变成一个整体,在外面看来,box里面就只有一行而不是n行,一行里面一个span元素整体(因为其外部盒子是内联的,所以外部看来只会是一行)和span前面的一个幽灵空白节点。这样设置box的line-height为96px就是正常的96了。其实书上面也有些透露(书p120“好处在于既能重置外部的line-height为正常大小”)里面的重置就是上面的意思。

deepbreaths 发表于 2018-2-15 01:49:16

wscops 发表于 2018-2-4 14:10
还与一个疑问,普通的display为inline的元素前面是否有幽灵空白节点呢?还是只有display为inline-block的...

只要是内联元素,不管是inline还是inline-block应该都会产生行框盒子,前面都会有幽灵节点,实验便可知,当box的line-height设置为50px,而span里面只有一行文字,且没有设置display时,给box一个背景色,box被撑起50px高,实际操作有效,说明此作为inline而不是inline-block的span前面有幽灵空白节点

deepbreaths 发表于 2018-2-15 01:52:27

demon-monk 发表于 2018-2-13 12:17
我在chrome和Firefox中的测试inline空元素是不会产生幽灵空白节点的。但我还是不是很明白到底什么时候会产 ...

对,这是个问题只有鑫大哥解释了,我也实验了,span里面没有内容的话,好像是没有幽灵空白节点的

christy.Qian 发表于 2018-3-1 16:44:21

本帖最后由 christy.Qian 于 2018-3-1 16:51 编辑

同问

为什么我做出来是这个效果?






【与书上的事例比较】
书上的:






我的:


span 大小同样都是auto x auto; 说明 并没有为span设置display:inline-block;



想用“幽灵空白节点”撑子span,为span加了display:inline-block;之后的效果:

除了span 自身具有了实际的宽高外,整体并无变化。。。





这么说来,导致差异性的可能性只有父元素继承了吗?
对body,通配符等我没做任何设置,代码如下:


疑惑中......

christy.Qian 发表于 2018-3-1 17:27:32

本帖最后由 christy.Qian 于 2018-3-1 17:29 编辑

继续刚才的疑虑,
为box依次添加父元素demo、show、main,
与事例的对比
我的:



可以看出, 现在连样式和继承关系都一样,但表现仍然不一致,到底是谁欺骗了谁?

deepbreaths 发表于 2018-3-1 21:11:22

christy.Qian 发表于 2018-3-1 16:44
同问

为什么我做出来是这个效果?


你用的是什么浏览器,我用ie浏览器敲了和你一模一样的代码,结果我的上面,两个都是96px高

deepbreaths 发表于 2018-3-1 21:27:58

christy.Qian 发表于 2018-3-1 16:44
同问

为什么我做出来是这个效果?



页: [1] 2
查看完整版本: 关于内联元素幽灵节点的疑问