看到一道面试题据说是最基础的东西，但是发现我还是不太清楚（css会用但是太细节的真心记不住）下面就在博客上记录一下：
首先要说一下line-height在api中的语法是：
line-height：normal | <length>| <percentage>| <number>；
line-height：主要是设计元素的行高，
我们现在这里假设font-size：24px；
1.首先是px的，设置行高是15px的话，那么我们得到的行高自然也是15px；没什么区别的；
2.如果是em的话，首先要看看默认的网页的字体像素，通常都是16px，所以说1em=16px。而对于本文中设置了24px，所以说1.5em就是1.5*24=36px;就是说行高设置了36px；
3.下一种百分比，我们同样要换算成px的，百分比也是基于当前字体尺寸的，100%=1em；在本题中是150%就是说为1.5em，就是1.5*24=36px；
4.最后一种是数值的，没有任何的单位，也被称为因子方式，使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。因子方法的数值是县继承后计算的，而其他的三个是先计算在继承的，所以如果说是按照理他最近的那个子元素的font-size乘上1.5；
最后用例子总结一下区别：
出一道题看看和你想的一样吗？：
以这个为例子第7行现在是1.5那么结果就是，首先文字不会发生重叠，单行行高是1.5*48=72px；（注意因为这里为了展现出重叠效果所以写了大量的文字，总的行高是要在乘上行数的，不过一定是72的倍数）。
第7行是1.5em和150%或者是36px，最后都是单行行高为36px，和div2里面的48没关系，是有div1的24*1.5决定的。三者都会发生文字重叠现象……
大家可以自己试试，图片插不进来了
所以说这里要知道的就是1em=16px=100%；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/35225.html
