一、区别

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

  • 父元素设置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. 简单的Writer和Reader

    Writer用于写出去到文件中,Reader用于将外面的文件读进来控制台 Writer和Reader有许多子类,但是子类大多都是直接运用父类Writer和Reader的方法,而且Writer和Read ...

  2. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  3. JS Nice – JavaScript 代码美化和格式化工具

    JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...

  4. 【CSS3】CSS3：border-image的详解和实例

    border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说 ...

  5. Java2_java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)

    什么是SDK呢? Software Develop Kit的简称,顾名思义就是软件开发包.软件开发商实现底层模块,并对其进行类库封装,配置成高级别的开发环境,为程序员上层的程序开发提供支持.譬如Goo ...

  6. HTML5锚点请用id代替name

    HTML5已经去掉name属性,实现锚点时请使用id,实例效果:http://keleyi.com/keleyi/phtml/html5/9.htm 支持Chrome,火狐,IE8以上等浏览器. 以下 ...

  7. javascript创建对象的几种方式

    javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON:但写法有很多种,也能混合使用.主要为下面几种:1.对象字面量的方式 person={firstname ...

  8. Location对象、History对象

    Location对象: Window对象的location属性引用的是Location对象,它表示窗口中当前显示的内容的URL,Document对象的location属性也引用Location对象,w ...

  9. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

  10. 总结CSS3新特性(Animation篇)

    动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { to ...