一、区别

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

  • 父元素设置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. 极富创意的3D文件夹切换效果

    今天分享的是一个极富创意的文件夹切换效果.这个案例使用CSS 3动画实现了一个3D的平行六面体旋转效果.点击顶部的3个按钮可以旋转并切换.另外,每个六面体本身是一个文件夹,点击后可以展开查看里面的详情 ...

  2. Hybrid框架UI重构之路：六、前端那点事儿（Javascript）

    上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...

  3. Android Studio 小提示，新建Activity

    Android Studio是在google I/O大会上新发布的一个IDE,基于IntelliJ,Android开发除了Eclipse之外又多了一种选择. 在Android Studio中如何在当前 ...

  4. yii redies 不同的工程缓存key的问题

    参考这篇文章 基本配置操作: yii main.php中: return array( ... 'components'=>array( 'redis_cache' => array ( ...

  5. 操作系统开发系列—12.g.在内核中设置键盘中断

    8259A虽然已经设置完成,但是我们还没有真正开始使用它呢. 所有的中断都会触发一个函数spurious_irq(),这个函数的定义如下: PUBLIC void spurious_irq(int i ...

  6. 访问其他程序的SheardPreferents

    程序A: SharedPreferences preferences=getSharedPreferences("myPreferences", Context.MODE_WORL ...

  7. 手机影音1--SplashActivity

    /** * 1.设置被启动的Activity为单例模式 */ public class SplashActivity extends Activity { /** * 是否已经启动主页面 */ pri ...

  8. iOS Address Book指南

    尽管OC是一门面向对象的语言,但是在你做开发的时候你会发现,并不是所有你用的frameworks都是面向对象的.有些是用C写的,例如Address Book的API,接下来让我们去学习一下Addres ...

  9. MAC OS 系统使用心得

    1.Windows快捷键在 mac os 里怎么调用 今天用teamviewer链接我在公司的电脑.我想调试程序,我程序默认F5是启动调试,但在mac os里,F5是调节屏幕亮度的. 这时候遇到快捷键 ...

  10. Photo Shop 修改、维护

    调整画布大小 要继续放更多的图片? 更改画布大小 移动图标 若图标为独立图层,则用移动工具拖动即可 若图层为非独立图层 - 用选区工具选中图标区域 - 用移动工具拖动图标 如果要拆分同一图层下的两个图 ...