<!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. mysql数据库字段bigint使用

    Mysql里有个数据类型bigint 在java转换成实体对象时,处理不当容易出现以下异常: java.lang.ClassCastException: java.lang.Long cannot b ...

  2. ADS 下 flash 烧写程序原理及结构

    本原理:在 windows 环境下借助 ADS 仿真器将在 SDRAM 中的一段存储区域中的数据写到 Nand flash 存 储空间中.烧写程序在纵向上分三层完成: 第一层: 主烧写函数(完成将在 ...

  3. h5 上下左右前后居中

    .outer { width: 200px; height: 200px; background: red; position: relative; } .inner { position: abso ...

  4. Android开发 获取View的尺寸的2个方法

    前言 总所周知,在activity启动的onCreate或者其他生命周期里去获取View的尺寸是错误的,因为很有可能View并没有初始化测量绘制完成.你这个时候获取的宽或的高不出意外就是0.所以,我们 ...

  5. STL vector容器需要警惕的一些坑

    从迭代器中取值切记需要判断是否为空 例如: vector<int> vtTest; vtTest.clear(); if (vtTest.empty()){ ; } ]; 如果没有忘了判断 ...

  6. Python-匿名函数与异常处理

    目录 匿名函数 什么叫匿名函数? 语法 max/min() sorted() map() filter() reduce函数 内置函数 面向过程编程 异常处理 什么是异常 异常的种类 异常处理 try ...

  7. TokuDB安装

    安装TokuDB 1, 创建mysql数据目录 #顺便把临时目录创建好 mkdir -p /data/mysql/tmp groupadd -r mysql useradd -g mysql -r - ...

  8. C#一般处理程序设置和读取session（session报错“未将对象引用设置到对象的实例”解决）

    登陆模块时,用到了session和cookie.在一般处理程序中处理session,一直报错.最后找到问题原因是需要调用 irequiressessionstate接口. 在ashx文件中,设置ses ...

  9. 杂项-公司：Facebook

    ylbtech-杂项-公司:Facebook Facebook(脸书)是美国的一个社交网络服务网站 ,创立于2004年2月4日,总部位于美国加利福尼亚州帕拉阿图,2012年3月6日发布Windows版 ...

  10. vue swiper点击后返回不能自动播放

    解决方法: 在返回时重新开启轮播 组件中: <swiper :options="swiperOption" ref="mySwiper" :class=& ...