<!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-8-31-win2d-通过-CanvasActiveLayer-画出透明度和裁剪

    title author date CreateTime categories win2d 通过 CanvasActiveLayer 画出透明度和裁剪 lindexi 2019-08-31 08:52 ...

  2. postgresql数据库安装后的pgadmin4切换中文

    如图所示

  3. 【JZOJ3397】【luoguP4556】雨天的尾巴

    description 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连 ...

  4. python的meshgrid用法和3D库 mpl_toolkits.mplot3d 与PolynomialFeatures多项式库学习

    meshgrid import numpy as np from matplotlib import pyplot as plt from mpl_toolkits.mplot3d import Ax ...

  5. 安卓手机端微信网页浏览记录清理debugx5.qq.com

    最近我们环境从复)星(云切换到阿里云.早上地铁路上就有小伙伴@,一阵搜索.找的如下的方法. 记录一下: 目前只支持安卓手机的微信内置浏览器清理. 由腾讯提供的网址http://debugx5.qq.c ...

  6. Javascript简单算法

    1.多维数组取其所有第几个值组成新数组 例如 [[, , ], [, , ], [, , ]],我要标红的值 [[1, 3, 5], [2, 2, 2], [3, 3, 3]] let t = [[1 ...

  7. 微信小程序 拼团商品倒计时（拼团列表、拼团商品详情）

    直接上图: 拼团列表.拼团详情-倒计时                                    //单个倒计时,适用用于单个商品的倒计时 js文件: //倒计时 function cou ...

  8. EnumProcess 实现枚举进程

    BOOL WINAPI EnumProcesses ( _Out_writes_bytes_(cb) DWORD * lpidProcess, _In_ DWORD cb, _Out_ LPDWORD ...

  9. [vagrant]vagrant centos静态ip设置

    vagrant 中使用的是public_network,而工作网络中,由于桥接了很多路由器,导致ip段位和本机的ip段位不在同一个局域网中 ifconfig之后的结果 [root@localhost ...

  10. Odoo使用jsonrpc协议

    在controller添加一个test方法, 不需参数 @http.route('/test', type = 'json', auth = 'public') def test(self): pha ...