line-height的那些事

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_39975379/article/details/89309355

这篇文章的主要目的是扫盲line-height(行高)属性

之前我对于line-height属性使用最多的次数是用来写单行垂直居中的。

line-height的属性值

默认值是normal,还支持数值、百分比以及长度值。

normal的值是一个变量,和font-family的值息息相关,font-family 的值不同,normal的值也不同。并且不同的系统不同的浏览器默认值的值也会不同。

数值,百分比值,长度值  :如line-height:1.5。的最终结果是设置的值和当前字体的尺寸相乘。

但是数值和百分比值、长度值之间是有区别的,数值的值是可以被集成到子元素中的。

使用line-height写页面的经验总结

重图文内容展示的网页比如博客论坛、公众号。要以数值为单位,考虑到文章的舒适度一般是1.6-1.8

偏重布局结构的精巧网站使用长度值和数值都是可以的,如果网站的样式是动态不可控的,固定的长度值更利于精度布局。

使用长度值一般为20px更利于布局。

猜你喜欢

转载自blog.csdn.net/weixin_39975379/article/details/89309355