［转］line-height1.5和line-height:150%的区别
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%的区别的更多相关文章
- Git之（一）Git是什么［转］
为什么使用Git 孔子曾经曰过的,名正则言顺 言顺则事成. 我们在学习一项新技术之前,弄清楚为什么要学它至关重要,至于为什么要学习Git,我用一段if-else语句告诉你原因: if(你相信我){ 我 ...
- ［caffe］linux下安装caffe（无cuda）以及python接口
昨天在mac上折腾了一天都没有安装成功,晚上在mac上装了一个ParallelDesktop虚拟机,然后装了linux,十分钟就安装好了,我也是醉了＝.＝ 主要过程稍微记录一下: 1.安装BLAS s ...
- ［Swift］基础
［Swift］基础 一, 常用变量 var str = "Hello, playground" //变量 let str1="Hello xmj112288" ...
- [Ruby on Rails系列]4、专题：Rails应用的国际化［i18n］
1. 什么是internationalization(i18n)? 国际化,英文简称i18n,按照维基百科的定义:国际化是指在设计软件,将软件与特定语言及地区脱钩的过程.当软件被移植到不同的语言及地区 ...
- ［译］一个灵活的 Trello 敏捷工作流
［译］一个灵活的 Trello 敏捷工作流 翻译自 An Agile Trello Workflow That Keeps Tasks Flexible Getting things done 可不只 ...
- iOS10收集IDFA，植入第三方广告［终结］－－ADMob
［PS: 前段时间,公司做ASO推广,需要在应用中收集IDFA值,跟广告平台做交互!于是有了这个需求--］ 1.首先,考虑了一下情况(自己懒 -_-#),就直接在首页上写了一个Banner,循环加载广 ...
- Java基础 之软引用、弱引用、虚引用 ·［转载］
Java基础 之软引用.弱引用.虚引用 ·［转载］ 2011-11-24 14:43:41 Java基础 之软引用.弱引用.虚引用 浏览(509)|评论(1) 交流分类:Java|笔记分类: Ja ...
- CSU 1642 Problem B［难］［前缀和］
Description 已知两个正整数a和b,求在a与b之间(包含a和b)的所有整数的十进制表示中1出现的次数. Input 多组数据(不超过100000组),每组数据2个整数a,b.(1≤a,b≤1 ...
- ［ufldl］Supervised Neural Networks
要实现的部分为:forward prop, softmax函数的cost function,每一层的gradient,以及penalty cost和gradient. forwad prop forw ...
- ［干货］2017已来，最全面试总结——这些Android面试题你一定需要
地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...
随机推荐
- STL源码分析之迭代器
前言 迭代器是将算法和容器两个独立的泛型进行调和的一个接口. 使我们不需要关系中间的转化是怎么样的就都能直接使用迭代器进行数据访问. 而迭代器最重要的就是对operator *和operator-&g ...
- Linux之iptables(三、命令--->单主机)
iptables命令规则格式: iptables [-t table] SUBCOMMAND chain [-m matchname[per-match-options]] -j targetname ...
- debian 7 安装
1. 从 live cd 或者 dvd 进行安装,官方文档已经够用,可以将 live cd 写进 u 盘,也可以将 dvd 放到硬盘上通过 grub 引导启动安装,文档在这里. 2.安装过程中尽量选择 ...
- Myeclipse学习总结（1）——Myeclipse优化配置
作为企业级开发最流行的工具,用Myeclipse开发java web程序无疑是最合适的,java web前端采用jsp来显示,myeclipse默认打开jsp的视图有卡顿的现象,那么如何更改jsp默认 ...
- Maven学习总结（1）——Maven入门
Maven学习总结(一)--Maven入门 一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的 ...
- Entity Framework Connection String不保留密码的方法
添加Entity Data Model的时候,到最后一步,有两个radio box: 如果选择include sensitive data,虽然很方便,但是在web.config或者app.confi ...
- 计算机与linux操作系统的发展
一.计算机 (一)计算机的概念 1.概念:计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速 ...
- DataSource是一个java ee的标准接口和servlet一样，用于数据库连接池上
1.DataSource是一个java ee的标准接口和servlet一样,用于数据库连接池上,需要第三方来具体实现. 2.DataSource是一个java ee的标准接口和servlet一样,用于 ...
- VCenter中嵌套openstack VM不能ping通外部网络问题解决的方法
问题描写叙述: 近期搭建了vCenter环境,并使用vCenter创建的VM搭建了一套openstack环境.在验证openstack的外网功能时.发现报文死活ping不通外网,抓包发现报文在vcen ...
- android4.4的两个bug
Android4.4做了大量的改动.但也造成了非常多新的问题. 工作中碰到了几个比較有趣的bug.这两个bug在nexus 5上也有. 记录一下.以资纪念 1.Android4.4在解析jpg头的时候 ...