一、区别

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

  • 父元素设置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. HoverTree菜单0.1.3新增效果

    HoverTree菜单0.1.3增加弹出菜单的动态效果,可以是动态下拉,也可以是动态淡入. 效果请看:http://keleyi.com/jq/hovertree/demo/demo.0.1.3.ht ...

  2. Navigator对象、Screen对象

    Navigator对象:         Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象:   Navigator对象集合:plugins[] 返回对 ...

  3. eclipse 常用设置，常用快捷键修改

    eclipse 常用设置,常用快捷键,myeclipse和eclipse类似' 首先打开eclipse的首选项-->搜索 keys' 常用的一些快捷键: Ctrl+1 快速修复(最经典的快捷键, ...

  4. tomcat通过socket连接MySQL，不再占用服务端口【linux】

    MySQL连接方式的说明 http://icbm.iteye.com/blog/1840673 MySQL除了最常见的TCP连接方式外,还提供SOCKET(LINUX默认连接方式).PIPE和SHAR ...

  5. Sharepoint 2010 无法上传文件的问题

    现象: 用户拥有某文档库的参与讨论权限,但是点击“上传文件”时,系统提示当前用户没有权限 (Access Denied) . 某用户拥有某文档库的参与讨论权限,“上传单个文件”按键是可以用的,但是“上 ...

  6. List集合概述

    上篇总结了Set集合,这回总结下List集合....先来框架图: 一.List集合 List集合代表一个元素有序,可重复的集合,集合中每个元素都有对应的顺序索引.List接口中增加了一些根据索引操作元 ...

  7. 获取在线APP的素材图片

    1.打开iTunes,搜索并下载APP 2.打开下载的APP的路径 4.对ipa包进行解压 5.找到app,右键"显示包内容"进行查看 6.结果

  8. 【iOS】block的使用

    Block 是iOS在4.0之后新增的程式语法,一般用于回调方法,功能上和delegate类似.本文将讲解block的几种常见的使用方法,当然,block中最值得注意的还是它的内存管理,我将在< ...

  9. App开发流程之使用GCD

    GCD即为Grand Central Dispatch的缩写,是一种主要用于异步处理任务的安全的高性能解决方案. 在此不对比其他异步处理技术,只记录GCD的使用及说明. 先记录一些必要的概念:线程,同 ...

  10. iOS sqlite3 的基本使用(增 删 改 查)

    iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...