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>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4742323.html有问题欢迎与我讨论，共同进步。
line-height1.5和line-height:150%的区别的更多相关文章
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- ［转］line-height1.5和line-height:150%的区别
line-height1.5和line-height:150%的区别 一.区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font ...
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- 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 ...
- Go to the first line OR the last line of the file
(1) 跳到首行 :1 或 gg (2)跳到最后一行 :$ 或 G 或shift+g(大写.当前若大小写锁定直接按g,未锁定则按shift+g)
- line-height:1.5和line-height:150%的区别
1. 给你个数,孩子自己算吧 line-height:1.5 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- day 08 预科
目录 可变和不可变 不可变类型 可变类型 可变: 列表/字典 ---->值变id不变 不可变: 数字/字符串 ---->值变id也变 列表的内置方法 字典的内置方法 可变和不可变 可变和不 ...
随机推荐
- jdbc应用程序连接Oracle rac的URL写法：
1.应用程序连接Oracle rac的URL写法: #Oracle(AMS) jdbc.driverClassName=oracle.jdbc.driver.OracleDriver jdbc.url ...
- 让你fork下来的项目与源项目保持同步
原文在此, 建议阅读, 我把关键步骤抽出来了, 方便概览 (也就是add remote upstream, fetch upstream, rebase, 再push) Step 1: Forking ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- Oracle基础和用户管理
1.数据库的使用: 项目的规模:负载量(用户)有多大? 成本: 安全性: (小型数据库)access.forbase 负载小 :100人以内,比如留言板,信息管理系统. 成本:千元以内. 安全性要 ...
- C4.5（决策树）
C4.5是一系列用在机器学习和数据挖掘的分类问题中的算法.它的目标是监督学习:给定一个数据集,其中的每一个元组都能用一组属性值来描述,每一个元组属于一个互斥的类别中的某一类.C4.5的目标是通过学习, ...
- Xcode8 pod install 报错 “Generating Pods project Abort trap
Xcode8 pod install 报错 "Generating Pods project Abort trap 今天在写一个新项目的时候,使用cocoapods在执行 $ pod ins ...
- OC NSFileManager(文件路径操作)
OC NSFileManager(文件路径操作) 初始化 NSFileManager * fm = [NSFileManager defaultManager]; 获取当前目录 [fm current ...
- 转：JQuery.Ajax之错误调试帮助信息
今天发现一篇讲Ajax比较好的文章,汇总下,作为自己的知识储备. 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. typ ...
- sqlalchemy多表联合查询(join)
使用outerjoin instances = db.session.query(Instance.name, Instance.sep_status, User.email).outerjoin( ...
- 【英文版本】Android开源项目分类汇总
Action Bars ActionBarSherlock Extended ActionBar FadingActionBar GlassActionBar v7 appcompat library ...