<!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. C#窗体代码相关笔记

    获取ComboBox下拉列表的所有选项值 ArrayList al = new ArrayList(); foreach (string item in this.comboBox2.Items) { ...

  2. vue倒计时：天时分秒

    data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...

  3. 廖雪峰Java15JDBC编程-3JDBC接口-4JDBC事务

    1 数据库事务:Transaction 1.1 定义 若干SQL语句构成的一个操作序列 要么全部执行成功 要么全部执行不成功 1.2 数据库事务具有ACID特性: Atomicity:原子性 一个事务 ...

  4. python相关软件安装流程图解————————pycharm安装——————pycharm-professional-2018.3.1

    https://www.jetbrains.com/pycharm/download/#section=windows http://www.cnblogs.com/ceshi2016/p/91129 ...

  5. JS的高阶函数

    JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 这就是最简单的高阶函数啦 functio ...

  6. pyQT Dialog默认选中某一个选项问题的解决

    方法一: 在新建ui文件时不要新建Dialog # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ...

  7. type 命令

    type 显示属于那种类型

  8. JspServlet

    初始化servlet时,选用的配置类: config.getInitParameter("engineOptionsClass")?(System.getSecurityManag ...

  9. NEO4J的安装配置及使用总结

    #工具:使用neo4j desktop版本# 一,下载工具 可以到官方网站上下载桌面版或者community版本的,下载地址:https://neo4j.com/, 安装好. 二.配置环境变量 本文参 ...

  10. adb的安装及配置

    1.下载adb的安装包进行下载 2.将安装报进行解压 3.配置环境变量,将adb的根目录添加到path环境变量中 4.在终端命令行中输入adb  servion命令,检查是否安装成功,如显示版本号则安 ...