<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>line-height值的形式不同子元素的行高也会不同</title>

    <style>

        .father{font-size: 14px;background:#ccc;}

        .son{font-size:26px;}

        .father1{line-height: 150%;}

        .father2{line-height: 1.5;}

        .father3{line-height: 1.5em;}

    </style>

</head>

<body>

    <p>父元素的字体大小为14px,子元素字体大小为26px</p>

    <h2>父元素行高为150%时</h2>

    <div class="father father1">

        父元素font-size:14px;line-height:150%;计算值是 14px * 1.5 = 21px

        <div class="son">

            子元素font-size:26px;line-height = 父元素行高 = 21px;

        </div>

    </div>

    <h2>父元素行高为1.5时</h2>

    <div class="father father2">

        父元素font-size:14px;line-height:1.5;计算值是 14px * 1.5 = 21px

        <div class="son">

            子元素font-size:26px;line-height会继承父元素的1.5，计算得值26px * 1.5 = 39px(子元素的行高);

        </div>

    </div>

    <h2>父元素行高为1.5em时</h2>

    <div class="father father3">

        父元素font-size:14px;line-height:1.5em;计算值是 14px * 1.5 = 21px

        <div class="son">

            子元素font-size:26px;line-height = 父元素行高 = 21px;

        </div>

    </div>

</body>

</html>

微信号“前端大全‘中看到一篇”这可能是史上最全的CSS自适应布局总结“中看到张鑫旭的”学习CSS的瓶颈“，在其中看到一个问题”line-height:150%和line-height:1.5的区别是？“（这引玉深度。。。）特此记录下自己学习的东西，方便以后进行查阅。

line-height的值：normal | <number> | <length> | <percentage>

百分比中的"%"：是继承父级元素的距离；

"无单位"：是子元素计算各自的行距离

两者的区别：

  • 父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
  • 父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

http://www.cnblogs.com/starof/p/4742323.html

https://www.zhihu.com/question/20394889

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/

line-height:150%/1.5em与line-height:1.5的区别的更多相关文章

  1. 【IntellJ IDEA】idea启动测试类报错Error running 'Test1.test': Command line is too long. Shorten command line for Test1.test or also for JUnit default configuration.

    idea启动测试类报错 Error running 'Test1.test': Command line is too long. Shorten command line for Test1.tes ...

  2. Error running 'xxx': Command line is too long. Shorten command line for xxx

    跑单元测试时,报错如下: Error running 'xxx': Command line is too long. Shorten command line for xxx 解决方案: 在项目所在 ...

  3. IDEA命令行缩短器助你解决此问题：Command line is too long. Shorten command line...

    生命太短暂,不要去做一些根本没有人想要的东西.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习 ...

  4. 深入了解line-height（各种单位总结1.5/150%/1.5em）

    默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值.你可以定义line-height属性来覆盖初始值:p{line-height:140%} 你可以有5种方式来定义line- ...

  5. 转：Canvas标签的width和height以及style.width和style.height的区别

    转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...

  6. JS通过getBoundingClientRect获取的height可能与css设置的height不一致

    发现如果DOM元素有padding-top或者padding-bottom值时, $(dom).height() = dom.style.display + padding-top + padding ...

  7. Ecshop出现问题 includes\lib_main.php on line 1329 includes\lib_base.php on line

    php 5.3版本兼容问题不少,以上函数参数传递问题可以将lib_main.php on line 1329这句 $ext = end(explode('.', $tmp)); 改为 : $extsu ...

  8. d3.svg.line()错误：TypeError: d3.svg.line is not a function

    var line_generator= d3.svg.line() .x(function (d,i) { return i; }) .y(function (d) { return d; }) 错误 ...

  9. offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

    开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...

  10. 将一个文件中的内容,在另一个文件中生成. for line in f1, \n f2.write(line)

    将一个文件中的内容,在另一个文件中生成. 核心语句: for line in f1: f1中的所有一行 f2.write(line)                                  ...

随机推荐

  1. 2019-7-1-Roslyn-让编译时候-Message-内容默认输出

    title author date CreateTime categories Roslyn 让编译时候 Message 内容默认输出 lindexi 2019-07-01 14:16:59 +080 ...

  2. SPOJ10707 COT2-Count on a tree II

    COT2 - Count on a tree II 中文题意 离线询问一颗树上路径(u,v)中经过所有点的权值的种类数. 题解 树上莫队.即在树的欧拉序列上进行莫队.同一个点加第一次时增加,第二次时减 ...

  3. half adder vs. full adder

    1, half adder 2-input, 2-output input: A, B; output out, carry; 2, full adder 3-input, 2-output inpu ...

  4. apache日志配置一例，包括指定存储目录与格式、自动删除过期的日志文件

    有需要的朋友可以参考下(http://www.nanke0834.com) 1.vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 添加或修改为:复 ...

  5. 02_springmvc处理器映射器和适配器（补充）

    一.非注解的处理器映射器 HandlerMapping 负责根据request请求找到对应的Handler处理器及Interceptor拦截器,将它们封装在HandlerExecutionChain ...

  6. <随便写>佛祖,哈哈!

    print(" _ooOoo_ ") print(" o8888888o ") print(" 88 . 88 ") print(" ...

  7. 可怜的baidu，可怜的音库

    baidu词典中用的中文音库竟然全都是汉典的中文音库   真可怜,baidu这么大个公司竟然连着1250个发音都懒得录   汉典的音库布都是同一格式,导致一部分音频文件MCI函数无法播放   真他妈可 ...

  8. js 属性的遍历

    引自:http://es6.ruanyifeng.com/#docs/object 属性的遍历 ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和 ...

  9. css3之 过渡

    早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更 ...

  10. 最全Kubernetes审计日志方案

    前言 当前Kubernetes(K8S)已经成为事实上的容器编排标准,大家关注的重点也不再是最新发布的功能.稳定性提升等,正如Kubernetes项目创始人和维护者谈到,Kubernetes已经不再是 ...