我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
font-size为0,高度反而增高的原因
不知道大家平时写代码的时候有没有发现一个问题,就是有时候设置某段文字font-size:0;的时候,整行高都会突然变高,如下图。
以下是代码:
html部分
<div class="div1">
<p>x<span>x</span>sjdkdfg奥斯卡了多少卡回复</p>
</div>
css部分
.div1 {
width: 500px;
line-height: 20px;
background: #999;
}
p {
margin: 0;
padding: 0;
}
span {
font-size: 0;
}
原因就是因为即使span的字体大小为0,但是他的高度还是继承了父元素的line-height:20px;这就导致高度存在会占据位置,我测试下Firefox和chrome浏览器,基本上都是增加了6.3-6.4px,不管父元素高度设置多高都是增加这么多,但是如果父元素字体设置变大了,增加的高度也会跟着变大。
解决方法就是让span元素高度为0,line-height:0;
为什么会这样,这个可能和幽灵空白节点有关,具体就需要查一下官方文档了。我们接着深入看下现在span是怎么回事。
我们给span设置好inline-block,添加一个宽度,加个背景色,可以看到span元素是显示往下位移的,而且整体的高度并没有再次改变,这就说明span元素发生了位移才导致的高度变高,那么为什么会位移?
左边是一个x字符,用来当做字符,右边是一个inline-block的div元素,我们可以看到div有内容的时候,他们的字符会基线对齐,然后div会自动往下位移已达到对齐的效果,这也是inlie-block元素的一个特性,那么我们再看span,这个span并没有字符呀,为什么也会下降呢?
这里就要说道“幽灵空白节点”了,每一个行框盒子,就是包裹inline内容的一行,这一行你可以理解为鼠标选中文字时,背景色显现出来的区域,只要有行框盒子就会有幽灵空白节点产生,这个幽灵节点不显示也不会占据宽度,用来使文字内容对齐,而现在span里面字体消失,但幽灵节点还在,加上父元素设置了line-height:20px;导致幽灵空白节点会和文字内容对齐,也会使span的高度下移来达到对齐效果。
既然我们猜测完了,就该测试一下是不是“幽灵节点”导致,我们在span的前面加一个x字符,这样就一目了然了,如下图:
一个和x差不多的高度和字符对齐,那么这足以证明我们的猜测应该是正确的,所以,以后遇到这种问题,就可以想到,原来是这个东西在作怪,于是只要将他的高度设置为0px,就不会出现这样的问题了。
评论(0)