<!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. 函数的作用域、作用域链以及return关键字

    1.作用域 全局作用域:在函数外部使用var关键字定义的变量 局部作用域:在函数内部使用var关键字定义的变量 特点   (1)局部变量无法直接影响全局变量    (2)在局部作用域中可以使用全局作用 ...

  2. 「题解」：[BZOJ4358]permu

    问题: permu 时间限制: 30 Sec  内存限制: 512 MB 题面 题目描述 给出一个长度为n的排列P(P1,P2,...Pn),以及m个询问.每次询问某个区间[l,r]中,最长的值域 连 ...

  3. 第十一章 Odoo 12开发之看板视图和用户端 QWeb

    QWeb 是 Odoo 使用的模板引擎,它基于 XML 来生成 HTML 片断和页面.通过 QWeb可生成内容丰富的看板(Kankan)视图.报表和 CMS 网页.本文中我们将学习QWeb 语法以及如 ...

  4. css---switch开关

    html: <label><input class="mui-switch" type="checkbox"> 默认未选中</la ...

  5. iOS之CGcontext.h方法和属性简介

    /* CoreGraphics - CGContext.h Copyright (c) 2000-2012 Apple Inc. All rights reserved. */ #ifndef CGC ...

  6. xml中的<if>和截取字符串

    <#if (envPollute=='1')>√</#if><#if (envPollute=='0')>√</#if>${as_title?subst ...

  7. window环境下Python+OpenCV配置

    最近开始学习OpenCV来进行计算机视觉实验,选择了Python作为实验语言,工欲善其事,必先利其器.先总结下安装配置. 现在opencv目测只支持Python2.7X版本的,还依赖于numpy和ma ...

  8. win10 安装face_recongnition

    1.安装dlib https://stackoverflow.com/questions/41912372/dlib-installation-on-windows-10 2.安装face_recon ...

  9. ArccGIS 10发布WFS服务并加载到Skyline中

    下面用ArcGIS Server 10.0将建筑物图层发布为WFS服务. (1)创建mxd文件.ArcMap打开建筑物图层,存为Buildings.mxd文件.注意:必须统一空间参考系,且要与图层的坐 ...

  10. 为什么@RestController返回的Date类型是Long型

    最近项目中发现一个好玩的事情:本地调试时,返回的date是日期格式yyyy-MM-dd HH:mm:ss,但发布到服务器后就变为Long型的时间戳了 最后查到的原因很简单,因为发布服务器启动时的脚本加 ...