携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第25天,点击查看活动详情
前言
line-height
属性算是CSS中比较常用的属性了,那么你知道line-height属性是如何计算的吗?你知道整数、小数、百分比形式计算会有什么不同吗?
今天我就来大家来了解一下line-height属性是如何计算的。
整数数值
例:父元素font-size: 20px; 子元素font-size: 15px;
父元素line-height: 50px
子元素line-height如图所示:
子元素line-height = 父元素line-height = 50px
小数(比值)
例:父元素font-size: 20px; 子元素font-size: 15px;
父元素 line-height: 1.5
子元素line-height如图所示:
子元素line-height = 父元素line-height * 子元素font-size = 1.5* 15 = 22.5px
百分比
例:父元素font-size: 20px; 子元素font-size: 15px;
父元素line-height: 100%
子元素line-height如图所示:
子元素line-height = 父元素line-height * 父元素font-size = 100% * 20 = 20px;
示例代码
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 如何计算line-height属性</title> <style> div{ font-size: 20px; line-height: 50px; /* line-height: 1.5; */ /* line-height: 100%; */ } p{ font-size: 15px; } </style> </head> <body> <div> <P>CSS 如何计算line-height属性</P> </div> </body> </html>
总结
整数数值:子元素line-height = 父元素line-height;
比值(小数):子元素line-height = 父元素line-height * 子元素font-size;
百分比:子元素line-height = 父元素line-height * 父元素font-size;
结语
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!