CSS中行高是什么意思

　　介绍

这篇文章将为大家详细讲解有关CSS中行高是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助。常规的操作表现是为一个块级元素设置高度属性,则其拥有了高度:

& lt; style> 　　test { 　　边界:1 px固体# ccc; 　　身高:100 px; 　　宽度:100 px; 　　} 　　& lt;/style> 　　& lt; body> 　　& lt; div类=皌est"祝辞& lt;/div> 　　& lt;/body>

但是根据熟知,当我们不为元素设置高度,而元素中有内容时,该元素依然获取到了高度:

& lt; style> 　　test { 　　边界:1 px固体# ccc; 　　宽度:100 px; 　　} 　　& lt;/style> 　　& lt; body> 　　& lt; div类=皌est"祝辞1 & lt;/div> 　　& lt;/body>

CSS中行高是什么意思

为什么div获取到了高度,并不是由于文字撑起了高度,而是行高撑起了div,比较一下两端代码

。测试{ 　　边界:1 px固体# ccc; 　　宽度:100 px; 　　行高:100 px; 　　} 　　& lt;/style> 　　& lt; body> 　　& lt; div类=皌est"祝辞1 & lt;/div> 　　& lt;/body>

效果如下:

CSS中行高是什么意思

。测试{ 　　边界:1 px固体# ccc; 　　宽度:100 px; 　　行高:0; 　　} 　　& lt;/style> 　　& lt; body> 　　& lt; div类=皌est"祝辞1 & lt;/div> 　　& lt;/body>

显而易见的结果就是因为有了高度所以有高度,没有高度则因为有了行高而有了高度更多详细的细节其实是因为每一行文字都有一个线框,这些一个个盒子自然撑起了父元素的高度。

同时,观察上面的例子就能发现文字的中线和行高的中线是在相同位置的,所以才有了常用的那套居中办法:

& lt; style> 　　test { 　　行高:100 px; 　　身高:100 px; 　　} 　　& lt;/style>

设置行高和高度相同数值则可以使得其中文字垂直居中

从结果来看确实如此,但是这句话不对,这句话多余了几个字,完全不需要设置高度,只需要行高就可以做到文字垂直居中了。

关于CSS中行高是什么意思就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

CSS中行高是什么意思