一、区别

区别体现在子元素继承时，如下：

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

二、举例

比如父元素设置属性：font- size:14px;line-height:1.5,child设置font-size:26px;

那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。

父元素设置属性：font-size:14px;line-height:150%,child设置font-size:26px;

那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。

<!DOCTYPE html>

<html>

    <meta charset="utf-8"/>

<head>

    <title></title>

    <style type="text/css">

.father {

    width: 400px;

    border: 1px solid pink;

    display: inline-block;

}

.son {

    width: 350px;

    border: 1px solid green;

}

.father1 {

    font-size: 14px;

    line-height: 1.5;

}

.son1 {

    font-size: 26px;

}

.father2 {

    font-size: 14px;

    line-height: 150%;

}

.son2 {

    font-size: 26px;

}

</style>

</head>

<body>

    <div class="father father1">

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

        <div class="son son1">

            子元素font-size:26px;line-height会继承父元素的1.5，计算值是39px

        </div>

    </div>

    <div class="father father2">

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

        <div class="son son2">

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

        </div>

    </div>

</body>

</html>

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4742323.html有问题欢迎与我讨论，共同进步。

line-height1.5和line-height:150%的区别的更多相关文章

  1. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  2. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  3. ［转］line-height1.5和line-height:150%的区别

    line-height1.5和line-height:150%的区别   一.区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font ...

  4. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  5. How to Get Vertical Line from Point and Line

    Description How to get vertical line cross one point which out of line in line. QPoint Line::Vertica ...

  6. Go to the first line OR the last line of the file

    (1) 跳到首行 :1 或 gg (2)跳到最后一行 :$ 或 G 或shift+g(大写.当前若大小写锁定直接按g,未锁定则按shift+g)

  7. line-height:1.5和line-height:150%的区别

    1. 给你个数,孩子自己算吧  line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...

  8. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  9. day 08 预科

    目录 可变和不可变 不可变类型 可变类型 可变: 列表/字典 ---->值变id不变 不可变: 数字/字符串 ---->值变id也变 列表的内置方法 字典的内置方法 可变和不可变 可变和不 ...

随机推荐

  1. Vue.js 2.0 参考手册.CHM下载

    下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh

  2. browser.html – HTML 实现 Firefox UI

    browser.html 是一个实验性的项目,用于证明一个概念:使用 HTML 重新实现 Firefox UI ,并作为一个应用程序.它是基于浏览器的 API ,并以浏览器的方式和系统的应用工作.即使 ...

  3. 20个免费的 JavaScript 游戏引擎分享给开发者

    这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...

  4. go语言常用函数：make

    创建数组切片 Go语言提供的内置函数make()可以用于灵活地创建数组切片.创建一个初始元素个数为5的数组切片,元素初始值为0: mySlice1 := make([]int, 5) 创建一个初始元素 ...

  5. Eclipse Plug-in Hello world

    这一篇就简单说下一个hello world插件工程创建过程. 1.创建一个Plug-in Project     2.填写project name     3.第二个确认框勾上,然后直接下一步     ...

  6. ie7下<a></a>标签不反应

    view中: <a href="Trading?id=@dr["id"]"> <div class="sy_img_div" ...

  7. 分享一个我的JavaScript版GridView多功能表格

    GridView是什么? GridView是由Mr.Co开发的一套开源的多功能表格插件,主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间.开发人员可以 ...

  8. 对比MS Test与NUnit Test框架

    前言: 项目中进行Unit Test时,肯定会用到框架,因为这样能够更快捷.方便的进行测试. .Net环境下的测试框架非常多,在这里只是对MS Test和NUnit Test进行一下比较, 因为这两个 ...

  9. ubuntu处理中文时设置locale

    ubuntu下涉及中文处理的程序时,需要正确设置,否则会出现问号或者乱码的情况 具体的原因: http://wiki.ubuntu.org.cn/Locale locale的解释 http://wik ...

  10. [Android]解决ClickableSpan中点击后ListView中item的长按冲突的问题

    以下内容为原创,转载请注明: 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3823429.html 项目中碰到一个问题,情景是这样的: 有一个Lis ...