直接正题:

看一下line-height可能的值:

其实可以分为两类:

(1)不带单位的(如line-height:1.5),这种是推荐使用的;

(2)带单位的(如line-heigth:30px/1.5em/150%);

这两种有什么区别呢?

其实只要记住:

一. 设置的如果是不带单位的(第一种),那它就是“缩放因子”,后代元素会继承这个缩放因子而不是继承父级的计算后的值,例如:

 <div style="line-height:1.5;font-size:12px; background-color: red; width: 200px; margin:0 auto;">
     <span>父元素内容</span>
     <div style="font-size:30px; background-color: #1CADB7;">
         <span>子元素内容</span>
     </div>
 </div>

得到的结果如图:

此时红色部分的高是:12*1.5=18px,而子元素的高是:30*1.5=45px; 

二. 设置的如果是带单位的 如果是 "px" 那就是死值,子元素继承父元素的 “死值” ,如果是 “%或者em” 那就是父级先于font-size相乘得到具体的 “死值”,子元素再继承这个死值,例如:

 <div style="line-height:150%;font-size:12px; background-color: red; width: 200px; margin:0 auto;">
     <span>父元素内容</span>
     <div style="font-size:30px; background-color: #1CADB7;">
         <span>子元素内容</span>
     </div>
 </div>

得到的结果如图:

此时红色部分的高是:12*150%=18px, 而子元素的高是:继承父级的18px, 而且还错位了。所以如果子元素设置的字体 大于 了父元素,就有可能出现错位等问题,这也是为什么推荐使用第一种方式。

设置line-height:1.5和line-height:150%或者line-height:150px的区别的更多相关文章

  1. HTML5新特性总结

    一.HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foote ...

  2. height与line-height的深入理解及应用

    转载:原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高" ...

  3. 剖析width、height继承

    在CSS这个一切皆为框的世界里,我们今天再来探究探究width与height. 我靠,width与height有什么好探究的,不就是设定元素的宽.高吗?大不了还要区分标准盒子模型和IE盒子模型的区别, ...

  4. 解决在onCreate()过程中获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  5. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

  6. obj.offsetHeight与obj.style.height区别

    我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.of ...

  7. 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

    但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...

  8. ABCpdf.NET中Rect,Bottom,Height的关系

    因为项目需要新功能,要在一个图片的上下加上固定高度的白边如下图.项目中一直使用ABCpdf.NET处理图片,但我一直没有做这方面的功能,所以找来API参考做. 这个简单需求做的过程中出现了一些曲折,主 ...

  9. Webstorm 提示 Can&#39;t use Subversion command line client

    Webstorm 提示 Can't use Subversion command line client Webstorm 提示 Can't use Subversion command line c ...

随机推荐

  1. SRM 146 DIV1 800

    Problem Statement      The purpose of a roundabout is to control the flow of traffic at a busy inter ...

  2. iOS-- 快速集成iOS基于RTMP的视频推流

    效果图 iTools有点卡, 但是推到服务器倒是很快的. 推流 前言 这篇blog是iOS视频直播初窥:<喵播APP>的一个补充. 因为之前传到github上的项目中没有集成视频的推流.有 ...

  3. getAttribute和getParameter的区别

    2016年1月19日JSP中getParameter与getAttribute有何区别? ——getParameter得到的都是String类型的.或者是http://a.jsp?id=123中的12 ...

  4. Java线程与Linux内核线程的映射关系[转]

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...

  5. 20145208 《Java程序设计》第10周学习总结

    20145208 <Java程序设计>第10周学习总结 教材学习内容总结 了解JAVA网络编程的基础知识 这一部分知识的学习在我的实验中有叙述实验五 补充内容: 在现有的网络中,网络通讯的 ...

  6. wing IDE破解方法

    WingIDE是我接触到最好的一款Python编译器了.但其属于商业软件,注册需要一笔不小的费用.因此,这篇简短的文章主要介绍了破解WingIDE的方法.破解软件仅供学习或者教学使用,如果您是商业使用 ...

  7. select,epoll的比较

    机制: select:只支持水平触发(数据不处理完无限通知) epoll:支持水平触发和边缘触发(仅通知一次) 单进程监控FD个数 select: 由FD_SETSIZE设置,默认值是2048.在大量 ...

  8. Hibernate入门(1)-第一个Hibernate程序

    Hibernate入门(1)-第一个Hibernate程序 Hibernate是最著名的ORM工具之一,本系列文章主要学习Hibernate的用法,不涉及Hibernate的原理.本文介绍第一个Hib ...

  9. Nhibernate 多对多级联更新

    问题是这样的,有两个表:文章(Article)和分类(Lable),这两者之间的关系是多对多关联,如果你用Nhibernate来保存数据的话非常的好操作,新建Article,然后把Lable值赋值给A ...

  10. eclipse配置hadoop的错误

    配置好eclipse,在执行run on hadoop的时候,提示11/03/29 16:47:59 WARN conf.Configuration: DEPRECATED: hadoop-site. ...