line-height1.5和line-height:150%的区别

 

一、区别

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

  • 父元素设置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>

转自：http://www.cnblogs.com/starof/p/4742323.html

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

  1. Git之（一）Git是什么［转］

    为什么使用Git 孔子曾经曰过的,名正则言顺 言顺则事成. 我们在学习一项新技术之前,弄清楚为什么要学它至关重要,至于为什么要学习Git,我用一段if-else语句告诉你原因: if(你相信我){ 我 ...

  2. ［caffe］linux下安装caffe（无cuda）以及python接口

    昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了＝.＝ 主要过程稍微记录一下: 1.安装BLAS s ...

  3. ［Swift］基础

    ［Swift］基础 一, 常用变量 var str = "Hello, playground" //变量 let str1="Hello xmj112288" ...

  4. [Ruby on Rails系列]4、专题：Rails应用的国际化［i18n］

    1. 什么是internationalization(i18n)? 国际化,英文简称i18n,按照维基百科的定义:国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区 ...

  5. ［译］一个灵活的 Trello 敏捷工作流

    ［译］一个灵活的 Trello 敏捷工作流 翻译自 An Agile Trello Workflow That Keeps Tasks Flexible Getting things done 可不只 ...

  6. iOS10收集IDFA，植入第三方广告［终结］－－ADMob

    ［PS: 前段时间,公司做ASO推广,需要在应用中收集IDFA值,跟广告平台做交互!于是有了这个需求--］ 1.首先,考虑了一下情况(自己懒 -_-#),就直接在首页上写了一个Banner,循环加载广 ...

  7. Java基础 之软引用、弱引用、虚引用 ·［转载］

    Java基础 之软引用.弱引用.虚引用 ·［转载］ 2011-11-24 14:43:41 Java基础 之软引用.弱引用.虚引用 浏览(509)|评论(1)   交流分类:Java|笔记分类: Ja ...

  8. CSU 1642 Problem B［难］［前缀和］

    Description 已知两个正整数a和b,求在a与b之间(包含a和b)的所有整数的十进制表示中1出现的次数. Input 多组数据(不超过100000组),每组数据2个整数a,b.(1≤a,b≤1 ...

  9. ［ufldl］Supervised Neural Networks

    要实现的部分为:forward prop, softmax函数的cost function,每一层的gradient,以及penalty cost和gradient. forwad prop forw ...

  10. ［干货］2017已来，最全面试总结——这些Android面试题你一定需要

        地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...

随机推荐

  1. swift 再识枚举变量

    // Use enum to create an enumeration. Like classes and all other named types, enumerations can have ...

  2. JSTL 实现 为Select赋多个值

    需要注意需要在.jsp文件中引入相应的类库 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core ...

  3. scrapy——8 scrapyd使用

    scrapy——8    scrapyd使用 什么是scrapyd 怎么安装scrapyd 如何使用scrapyd--运行scrapyd 如何使用scrapyd--配置scrapy.cfg 如何使用s ...

  4. [TS-A1487][2013中国国家集训队第二次作业]分配游戏[二分]

    根据题意,设$3n$次比较中胜了$w$次,负了$l$次,平了$d$次,所有场次中胜了$W$次,负了$L$次,平了$D$次.如果一场赢了,那么$w-l$就会$+1$,相同地,$W-L$也会$+1$:如果 ...

  5. POJ 1190 生日蛋糕 剪枝

    Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri ...

  6. P1331 海战 洛谷

    题目描述 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物,领空将布满了F-2003飞机.此外,巡洋船只和舰队将被派去保护海岸线.不幸的是因为种种原因,国防海军部仅有很少的几 ...

  7. 洛谷 P3496 [POI2010]GIL-Guilds

    P3496 [POI2010]GIL-Guilds 题目描述 King Byteasar faces a serious matter. Two competing trade organisatio ...

  8. 正则表达式，字符串中需要两个反斜杠“\\d”

    这个正则表达式为什么会有两个反斜杠? "^.*?\\.(jpg|png|bmp|gif)$"上面这个正则表达式为什么有两个反斜杠呢?反斜杠点\.就能表示点.了,为什么还要在\.前面 ...

  9. javascript正則表達式

    定义一个正則表達式 能够用字面量 var regex = /xyz/; var regex = /xyz/i; 也能够用构造函数 var regex = new RegExp('xyz'); var ...

  10. 学习笔记——AOP

    以下纯属个人刚了解点皮毛,一知半解情况下的心得体会: ==================================================================== AOP( ...