摘要:最近学习一个出现一个奇怪的现象,话不多说先贴代码。当初认为由于设置成了之后,换行和空格都被解析造成的,然是后来已测试,发现根本不是这个原因造成的,最近经过自己的苦思冥想,查阅资料,竟然发现是搞得鬼。因为浮动不属于行内元素了。
最近学习一个html,出现一个奇怪的现象,话不多说先贴代码。
`Document
` ----------
这是代码。。。
当初认为由于设置成了line-blcok之后,换行和空格都被解析造成的,然是后来已测试,发现根本不是这个原因造成的,最近经过自己的苦思冥想,查阅资料,竟然发现是vertical-align搞得鬼。
现在我来解释下原因,不过要明白的话,需要了解行高,基线等概念
我先在举几个例子
Document
x我
效果:
可能大家没注意到:这个现象已经说明了原因,现在我来分下下:
**
1. 了解x;我们知道x的底部是基线,但是根据分析,基线下面应该有底线,底线下面有一半的行高, 2.我们可以看到x是和div垂直平齐的,这个也是google浏览器默认的文本以基线居中,但是基线下面还有到底线的距离和半个行高。因此为了容下字体,下面的div需要向下移动 基线到底线的距离+一半的行高 3.在google浏览器中,默认字体大小16px,ling-height是18px,我测量他们的缝隙是3px,就可以知道他们一半的行高是1px,基线到底线的距离是2px, 总结:这个就是出现缝隙的原因所在了。
**
解决办法:
1.浮动。因为浮动不属于行内元素了。 2.改变vertical-align的对齐方式,适应top,和bottom可以消除缝隙, 注意:是用text_top 和text_bottom任然会出现缝隙但是比之前小一点,因为他们是跟字体对齐,换句话说,他们没有基线到底线的距离,只有一半行高的距离,所以缝隙会变小。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115364.html
摘要:最近学习一个出现一个奇怪的现象,话不多说先贴代码。当初认为由于设置成了之后,换行和空格都被解析造成的,然是后来已测试,发现根本不是这个原因造成的,最近经过自己的苦思冥想,查阅资料,竟然发现是搞得鬼。因为浮动不属于行内元素了。 最近学习一个html,出现一个奇怪的现象,话不多说先贴代码。 ` Document *{ margin:0; padd...
摘要:小明马上开发完毕,成功上线。下班过后,小明回想大红说的话,什么是间隙锁,什么是插入意向锁,看来作为开发者对数据库不应该只会写啊,不然遇到一些疑难杂症完全没法解决啊。破坏了数据库中的隔离性。 1.锁? 1.1何为锁 锁在现实中的意义为:封闭的器物,以钥匙或暗码开启。在计算机中的锁一般用来管理对共享资源的并发访问,比如我们java同学熟悉的Lock,synchronized等都是我们常见的...
摘要:行级锁,页级锁,表级锁。闻其名知其意,比较少见的是页级锁,它锁定的是一组相邻数据。排他锁允许获得排他锁的事务更新数据,阻止其他事务取得相同数据集的读写。意向排他锁事务打算给数据行加行排他锁,事务在给一个数据行加排他锁前必须先取得该表的锁。 废话 本篇的名字简直可以起成《事务操作:从入门到放弃》。 力图解决:在MySQL 5.5 版本及更高版本时,使用事务的完整流程和细节记录,而无需面对...
阅读 2862·2023-04-26 01:01
阅读 3654·2021-11-23 09:51
阅读 2496·2021-11-22 14:44
阅读 3458·2021-09-23 11:57
阅读 2778·2021-09-22 14:58
阅读 5833·2021-09-10 11:25
阅读 2080·2019-08-30 13:11
阅读 1573·2019-08-30 12:59