全面理解解析line-height: 150%和line-height: 1.5em和line-height: 1.5rem和line-height: 1.5的区别

来源：互联网发布：vue.js blog 编辑：程序博客网时间：2024/06/06 00:10

欢迎来到Altaba的博客 2017年9月7日

很开心今天能抽点时间解析这个CSS样式行高的问题，相信行高如果设置具体的大小是很好确定的，当设置为上面这四个相对单位的时候，可能就有点凌乱

没有对比就没有区别，没有求真就没有进步，本人致力于为大家提供最准确的前端技术解答

先上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div div{            display: inline-block;        }        .box{            font-size: 20px;            line-height: 4em;        }        .box div{            display: inline-block;        }    </style></head><body><h2>150%</h2><div style="font-size: 20px;line-height: 150%">    父元素内容font-size: 20px    <div style="font-size: 30px">子元素内容font-size: 30px</div></div><h2>1.5em</h2><div style="font-size: 20px;line-height: 1.5em">    父元素内容font-size: 20px    <div style="font-size: 30px">子元素内容font-size: 30px</div></div><h2>1.5 子元素设置line-height:1.5</h2><div style="font-size: 20px;line-height: 1.5em">    父元素内容font-size: 20px    <div style="font-size: 30px; line-height: 1.5">子元素内容font-size: 30px</div></div><h2>1.5rem</h2><div style="font-size: 20px;line-height: 1.5rem">    父元素内容font-size: 20px    <div style="font-size: 30px">子元素内容font-size: 30px</div></div><h2>1.5</h2><div style="font-size: 20px;line-height: 1.5">    父元素内容font-size: 20px    <div style="font-size: 30px;line-height: 2">子元素内容font-size: 30px <span style="font-size: 40px">孙子元素</span></div></div><h2>1.5 子元素未设置字体大小</h2><div style="font-size: 20px;line-height: 1.5">    父元素内容font-size: 20px    <div style="font-size: 30px">子元素内容font-size: 30px</div></div><h2>继承性理解</h2><div class="box">    <div>子元素未设置行高        <div>孙子元素未设置行高</div>    </div></div><div style="font-size: 50px">    父元素    <div style="font-size: 20px;line-height: 1em">子元素</div></div><h1>已经完全理解</h1></body></html>

通过对比及测试发现：

想知道某个元素的line-height（行高）大小，别去思考其父元素和子元素怎么设置的或者对其有什么影响，记住！！！：只看当前元素的某些样式

***某个元素A，当其设置了
line-height: 150或者line-height: 1.5em结果始终一样，其自身的行高等同，计算方式都是1.5*（当前元素实际的字体大小）

其后代元素如果未另外设置行高便会继承元素A的行高大小

***某个元素B，当其设置了

line-height: 1.5rem,其自身的行高计算方式为：1.5*（当前页面body或者HTML设置的font-size大小，如若没设置font-size大小即为浏览器默认的页面字体大小）

其后代元素如果未另外设置行高便会继承元素A的行高大小

***有点绕的在这！某个元素C，当其设置了

line-height: 1.5，其自身的行高计算方式也简单，=1.5*（当前元素实际的字体大小），

其后代的元素行高：

（1）如果后代的元素自己设置了行高则会使用自己的行高大小

（2）如果后代未设置行高，元素C只会将其1.5这个倍数继承给后代元素，不同后代的元素行高大小和其自身的实际字体大小相关，计算方式：（后代元素自身的字体大小*1.5）

阅读全文

0 0